css:grid layout分析

HTML:

           <div class="wrapper">

            <div class="one">One</div>

            <div class="two">Two</div>

            <div class="three">Three</div>

            <div class="four">Four</div>

            <div class="five">Five</div>

            <div class="six">Six</div>

           </div>

 

CSS:

.wrapper {

        display: grid;

        grid-template-columns: repeat(3, 1fr);/*表示平均分3列*/

/*网络模板列，repeat表示可重复片段，允许以紧凑的形式写入显示重复的大量列，fr单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配*/

        grid-gap: 10px;/*网格间隙为10像素*/

        grid-auto-rows: minmax(100px, auto);/*每行最小100像素，最大自动*/

/*网络自动行，minmax（min,max）是一种功能符号，用于定义大于或等于min且小于max的大小范围*/

      }

      .one {

        grid-column: 1 / 3;

 /*grid-column表示占用列的空间:从第1列那里开始,到第3列前面*/

        grid-row: 1;

/*grid-row 表示占用行的空间：在第1行的位置*/

      }

      .two {

        grid-column: 2 / 4;

/*grid-column表示占用列的空间:从第2列那里开始,到第4列前面*/

        grid-row: 1 / 3;

/*grid-row 表示占用行的空间：从第1行的位置开始，到第3行前面*/

 

      }

/*后面依次类推，都是这样*/

      .three {

        grid-column: 1;

        grid-row: 2 / 5;

      }

      .four {

        grid-column: 3;

        grid-row: 3;

      }

      .five {

        grid-column: 2;

        grid-row: 4;

      }

      .six {

        grid-column: 3;

        grid-row: 4;

      }