CSS网格布局

网格（Grid）是水平线和垂直线的集合，使用网格排版，可使元素在页面之间移动时不会跳动或改变宽度，从而在网站上提供更高的一致性。要定义网格，需要将display的值设为grid。

指定列的数量

通过 grid-template-columns 属性可在网格中添加列。其值可以是固定值，也可以是柔性的fr，还可以通过repeat()函数指定。

grid-template-columns: 200px 200px 200px;
grid-template-columns: 2fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

网格之间的间距

使用属性grid-column-gap来表示列之间的间隙，grid-row-gap为行的间隙，grid-gap可同时设置两者。这些间隙可以是任何长度单位或百分比，但不能是fr单位。

网格的大小

默认根据内容生成宽和高，但也可以通过grid-auto-rows和grid-auto-columns来指定大小。minmax()函数可让我们设置最小和最大值。

网格布局案例一

基于行的位置设置

我们可以通过指定开始和结束行来根据这些行放置内容。

1. grid-column-start
2. grid-column-end
3. grid-row-start
4. grid-row-end

这些属性都可以使用行号作为值。还可以使用速记属性，一次指定起始行和结束行，并以斜杠字符分隔。

1. grid-column
2. grid-row

网格模板区域

在网格上放置项目的另一种方法是使用grid-template-areas属性，并为设计的各个元素命名。规则如下：

1. 需要填充网格的每个单元格。
2. 要跨越两个单元格，请重复该名称。
3. 若要使一个单元格为空，请使用.。
4. 区域必须为矩形。
5. 区域不能在不同的位置重复。

参考资料

2. https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids