一、引言

在日常布局当中，我们使用flex布局居多，可以快速形成自己想要的布局，但当我们想实现如下的布局时

使用flex布局就显得苍白无力，我们可能需要设置多个display：flex，这个时候网格布局就大大节省了我们的效率。

二、基础用法

     .main {
            width: 300px;
            height: 300px;
            background: skyblue;
            display: grid；
            grid-template-columns: 1fr 0.6fr 1fr;
            grid-template-rows: 100px 100px 100px;
      }

单位：fr 类似flex布局中的flex-grow

三、父项属性

网格合并

父项：grid-template-areas
子项：grid-area

代码简写方式：

grid-template-columns: 1fr 1fr 1fr;					
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:									
  'a1 a1 a2'
  'a1 a1 a2'
  'a3 a3 a3';

相当于：

grid-template:
  'a1 a1 a2' 1fr
  'a1 a1 a2' 1fr
  'a3 a3 a3' 1fr
  /1fr 1fr 1fr;

完整代码：

.main {
        width: 300px;
        height: 300px;
        background: skyblue;
        display: grid;
        /* grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px; */

        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas:
          'a1 a1 a2'
          'a1 a1 a2'
          'a3 a3 a3';
      }
      .main div {
        background: pink;
        border: 1px solid black;
        box-sizing: border-box;
      }
      .main div:nth-of-type(1) {
        grid-area: a1;
      }
      .main div:nth-of-type(2) {
        grid-area: a2;
      }
      .main div:nth-of-type(3) {
        grid-area: a3;
      }

效果图：

网格间距及简写

这些写法也可以给弹性布局使用

row-gap: 20px;
column-gap: 30px;

row-gap: 行之间间隙

column-gap：列之间间隙

简写：gap:行间隙列间隙

gap: 20px 30px;

网格对齐方式及简写

justify-items、align-items、place-items(垂直，水平) 默认值stretch，指定了子项在网格中的对齐方式类似于flex布局的值
justify-content、align-content、place-content(垂直，水平) 默认值stretch，指定了所有的网格在grid容器中对齐方式(容器大于单元格)

子项属性

基于线的元素位置

  .main div:nth-of-type(1) {
        background: pink;
        grid-column-start: 3; // 或者加上span 2、3、4指占多少列/行 但是就没有了指定位置的特性
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 3;
}

表示该单元格从第二列线到第三列线，以及第二行线到第三行线

repeat()

auto-fill可选值，指定可重复的数值

.main {
        height: 400px;
        background: pink;
        display: grid;
        grid-template-columns: 150px repeat(2, 100px);
        grid-template-rows: 100px;
      }
      .main div {
        background: skyblue;
      }

auto-fill：自动根据元素大小进行计算可以repeat多少值

minmax()

设置最大值和最小值的范围

.main {
        height: 400px;
        background: pink;
        display: grid;
        grid-template-columns: 100px minmax(100px, 1fr) 100px;
        grid-template-rows: 100px;
      }
      .main div {
        background: skyblue;
        border: 1px solid black;
      }