zoukankan      html  css  js  c++  java
  • CSS Grid(CSS网格)

     Grid被设计来做一些Flexbox不能做的事情,所以不是被设计来取代Flexbox的。

    flexbox 一维的

    Grid 二维的

    总结: 

    Grid Items作用在Grid Container的直接子元素下

    下面给出一些示例:

    1.html:   

    <style>
    * {
    margin: 0;
    padding: 0;
    }

    .wrapper {
    display: grid;
    grid-template-columns: 70% 30%;

    /*
    grid-column-gap: 1em;
    grid-row-gap:1em;
    */
    grid-gap: 1em;
    }

    .wrapper>div {
    background: #eee;
    padding: 1em;
    }

    .wrapper>div:nth-child(odd) {
    background: #ddd;
    }
    </style>

    <body>


    <!-- 这个最外面包裹的是wrapper 下面有5个div:4个Lorem和1个Hello -->
    <div class="wrapper">
    <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis aperiam a molestias dolores nobis alias sint unde eveniet
    ex saepe, quas, praesentium dolorem vitae magni dolore doloremque? Aspernatur, voluptatum possimus! Lorem ipsum
    dolor sit amet consectetur adipisicing elit. Blanditiis aperiam a molestias dolores nobis alias sint unde eveniet
    ex saepe, quas, praesentium dolorem vitae magni dolore doloremque? Aspernatur, voluptatum possimus!
    </div>
    <div>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur reprehenderit quae, obcaecati eveniet at accusamus rem!
    Debitis autem minima eaque accusantium vitae. Ab esse distinctio laborum harum voluptas eligendi minima.
    </div>
    <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis aperiam a molestias dolores nobis alias sint unde eveniet
    ex saepe, quas, praesentium dolorem vitae magni dolore doloremque? Aspernatur, voluptatum possimus! Lorem ipsum
    dolor sit amet consectetur adipisicing elit. Blanditiis aperiam a molestias dolores nobis alias sint unde eveniet
    ex saepe, quas, praesentium dolorem vitae magni dolore doloremque? Aspernatur, voluptatum possimus!
    </div>
    <div>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur reprehenderit quae, obcaecati eveniet at accusamus rem!
    Debitis autem minima eaque accusantium vitae. Ab esse distinctio laborum harum voluptas eligendi minima.
    </div>
    <div>Hello</div>
    </div>
    </body>

    </html>

    2.html:

        <style>

     

            .wrapper{

                display: grid;

                /* grid-template-columns:1fr 1fr 1fr;  fr的意思是fraction,就是分数 ,x分之一*/

                grid-template-columns: repeat(3,1fr);

                /* grid-template-columns: repeat(4,1fr 2fr); */

                grid-gap:1em;

                grid-auto-rows: 100px; (注意看这个属性)

            }

     

            .wrapper>div {

                background: #eee;

                padding: 1em;

            }

     

            .wrapper>div:nth-child(odd) {

                background: #ddd;

            }

        </style>

    </head>

     

    <body>

     

        <div class="wrapper">

            <div>

                Lorem ipsum dolor sit.

            </div>

            <div>

                Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam cumque possimus eveniet aliquid. Impedit delectus architecto veritatis? Tempora cupiditate esse odio placeat doloribus nisi quaerat laudantium dolor, illum laborum consequuntur eaque est minus? Ex quae eius expedita dolor ab possimus.

            </div>

            <div>

                Lorem ipsum dolor sit.

            </div>

            <div>

                Lorem ipsum dolor sit.

            </div>

            <div>

                Lorem ipsum dolor sit.

            </div>

            <div>

                Lorem ipsum dolor sit.

            </div>

            <div>

                Lorem ipsum dolor sit.

            </div>

        </div>

     

    </body>

     

    (grid-auto-rows属性)

     

            .wrapper{

                display: grid;

                /* grid-template-columns:1fr 1fr 1fr; */

                grid-template-columns: repeat(3,1fr);

                /* grid-template-columns: repeat(4,1fr 2fr); */

                grid-gap:1em;

                /* grid-auto-rows: 100px; */

                                       //最小100px 要是多了就拉伸

                grid-auto-rows:minmax(100px,auto);

            }

     

    (grid-auto-rows:minmax(100px,auto);属性)

     

     

    2.html完整代码

     

        <style>

            *{ 

               margin:0;

               padding:0;

             }

     

            .wrapper{

                display: grid;

                /* grid-template-columns:1fr 1fr 1fr; */

                grid-template-columns: repeat(3,1fr);

                /* grid-template-columns: repeat(4,1fr 2fr); */

                grid-gap:1em;

                /* grid-auto-rows: 100px; */

                grid-auto-rows:minmax(100px,auto);

            }

     

            .nested{

               display: grid;

               grid-template-columns: repeat(3,1fr);

               grid-auto-rows:70px;

               grid-gap:1em;

            }

     

            .wrapper>div {

                background: #eee;

                padding: 1em;

            }

     

            .wrapper>div:nth-child(odd) {

                background: #ddd;

            }

     

            .nested > div{

               border: #333 1px solid;

               padding: 1em;

            }

     

        </style>

     

     

    <body>

     

        <div class="wrapper">

            <div>

                Lorem ipsum dolor sit.

            </div>

            <div>

                Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam cumque possimus eveniet aliquid. Impedit delectus architecto veritatis? Tempora cupiditate esse odio placeat doloribus nisi quaerat laudantium dolor, illum laborum consequuntur eaque est minus? Ex quae eius expedita dolor ab possimus.

            </div>

            <div class="nested">

                <div>Lorem</div>

                <div>Lorem</div>

                <div>Lorem</div>

                <div>Lorem</div>

                <div>Lorem</div>

                <div>Lorem</div>

                <div>Lorem</div>

                <div>Lorem</div>

                <div>Lorem</div>

            </div>

            <div>

                Lorem ipsum dolor sit.

            </div>

            <div>

                Lorem ipsum dolor sit.

            </div>

            <div>

                Lorem ipsum dolor sit.

            </div>

            <div>

                Lorem ipsum dolor sit.

            </div>

        </div>

     

    </body>

    3.html:

      <style>

            *{ 

               margin:0;

               padding:0;

             }

            .wrapper{

                display: grid;

                grid-template-columns: 1fr 2fr 1fr;

                grid-auto-rows: minmax(100px ,auto);

                grid-gap:1em;

                justify-items: start;(注意看这里)

            }

     

            .wrapper>div {

                background: #eee;

                padding: 1em;

            }

     

            .wrapper>div:nth-child(odd) {

                background: #ddd;

            }

     

        </style>

    </head>

     

    <body>

     

        <div class="wrapper">

          <div class="box box1">Box 1</div>

          <div class="box box2">Box 4</div>

          <div class="box box3">Box 4</div>

          <div class="box box4">Box 4</div>

        </div>

     

    </body>

     

    (justify-items:center)

    (justify-items:end)

    (justify-items:stretch)  //default

     

    (align-items:start)

    (align-items:center)

    (align-items:end)

    (align-items:stretch)    //default

    LineNumbers

     grid-column:1/3;

    (without)

    (with)

     

            .box1{

              grid-column:1/3;

              /* this means 'one' to 'three' */

            }

     

     

         .box1{

              /* align-self:start; */

              grid-column:1/3;

              grid-row: 1/3;

              /* this means 'one' to 'three' */

            }

     

            .box2{

                grid-column: 3;

                grid-row: 1/3;

              /* align-self: end; */

            }

     

            .box3{

                grid-column: 2/4;

                grid-row: 3;

              /* justify-self: end; */

            }

     

            .box4{

                grid-column: 1;

                grid-row: 2/4;

            }

     

    (overlap重叠)

     

  • 相关阅读:
    使用TFS CI 又想保留服务运行状态的简单方法
    【知乎】二战中日本陆军的建制
    缓存你的BITMAP对象
    Android 多种方式正确的加载图像,有效避免oom
    GitHub进一步了解
    响应式编程,是明智的选择
    Android 主题动态切换框架:Prism
    Android Fragment使用(二) 嵌套Fragments (Nested Fragments) 的使用及常见错误
    ClassLoader工作机制
    Java——泛型(最易懂的方式讲解泛型)
  • 原文地址:https://www.cnblogs.com/eret9616/p/8563660.html
Copyright © 2011-2022 走看看