网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。
容器属性
display: grid
将容器设置为网格布局，是使用网格布局的必要条件
grid-template-columns / grid-template-rows
grid-template-columns 设置每一列的宽度
grid-template-rows 设置每一行的高度
两种属性对应的值可以为宽度和高度的集合，单位可以为px、%等长度单位，也可以是fr（片段，将宽度或者高度进行等分）
例如
box1 {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 200px 200px 200px;
}
box2 {
width: 600px;
height: 600px;
display: grid;
grid-template-columns: 33.3% 33.3% 33.3%;
grid-template-rows: 33.3% 33.3% 33.3%;
}
box3 {
width: 600px;
height: 600px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
但是上方写法存在大量的重复的高度和宽度的数据，进而可使用repeat函数
repeat(重复次数, 重复长度集合1fr/200px/33.3%/ 1fr 2fr 3fr);
关键字
auto-fill 表示自动充满整行或者整列
grid-template-columns: repeat(auto-fill, 100px);
auto 关键字表示由浏览器自己决定长度，需要配合固定宽度一起使用
grid-template-columns: 100px auto 100px;
minmax() 函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
上面代码中，minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。
高级用法
repeat(auto-fill, minmax(260px, 1fr));每个单元格不能小于260px,小于260px后自动减少一列
grid-gap
grid-gap设置行与行和列与列的间隔
grid-row-gap属性设置行与行的间隔（行间距）
grid-column-gap属性设置列与列的间隔（列间距）
grid-auto-flow属性
用于设置子元素的顺序
row 先行后列，为默认值
column 先列后行
row dense 表示"先行后列"，并且尽可能紧密填满，尽量不出现空格
column dense 表示"先列后行"，并且尽量填满空格
justify-items / align-items / place-items
justify-items属性设置单元格内容的水平位置（左中右）
align-items属性设置单元格内容的垂直位置（上中下）
两个属性值如下
- start：对齐单元格的起始边缘。
- end：对齐单元格的结束边缘。
- center：单元格内部居中。
- stretch：拉伸，占满单元格的整个宽度（默认值）。
place-items属性是align-items属性和justify-items属性的合并简写形式。
place-items: start end;
如果省略第二个值，则浏览器认为与第一个值相等。
容器内子组件属性
grid-row / grid-column
grid-column属性是grid-column-start和grid-column-end的合并简写形式
grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
/* 横向对应两列 纵向对应两行*/
.item-1 {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
