概念

网格布局由容器和子元素组成。

容器(container)：通过设置 display 属性的值为 grid或 inline-grid将其定义为弹性容器。

设置网格布局以后，容器子元素的float、display: inline-block、display: table-cell、vertical-align和column-*等都将失效

子元素(item)：容器中的每个单元称为子元素

网格布局如下图分为：网格行(Rows)、网格列(Cloums)、网格间隙(Gaps)。

网格线：正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线。如下图所示：

设置容器属性

grid-template-columns ：设置列数和列宽

//例如
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
 
//其中repeat(3, 1fr)表示3个重复的1fr宽
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
 
//其中auto-fill，表示不限制数量
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}
 
//其中minmax(100px, 1fr),限定了宽度范围在100px-1fr之间
.container {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(100px, 1fr);
}
 
//其中方括号[c1]为对应网格线的名称
.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
复制代码

grid-template-rows：设置行数和行高
grid-column-gap：设置列间隙宽度
grid-row-gap：设置行间隙宽度
grid-gap：是 grid-row-gap 和 grid-column-gap 属性的简写
grid-template-areas：用于定义区域

// .表示不定义的区间；
// 每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end
grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';
复制代码

grid-auto-flow：网格填充顺序，默认row（先行后列），其他选项有row dense、column、column dense。
justify-content：用于水平对齐容器内的整个网格。
align-content：用于垂直对齐容器内的整个网格。

设置子元素属性

子元素默认是单元格，但是是可以改变的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。

grid-row-start：设置上边框对应的网格线
grid-row-end：设置下边框对应的网格线
grid-column-start：设置左边框对应的网格线
grid-column-end：设置右边框对应的网格线
grid-column：是grid-column-start和grid-column-end的简写。

//表示从1开始到4结束
.item1 {
  grid-column: 1/4;
}
//合并两个单元格
.item1 {
  grid-column: 1 / span 2;
}
grid-row：grid-row-start和grid-row-end的简写。

grid-area：设置对应的网格区域名称

.item {
  grid-area: 1 / 2 / 5 / 6;
}
复制代码