CSS网格布局
网格布局将元素占用的空间划分为二维格子，下级元素放置在格子所在的位置上。划分格子的元素叫做网格容器，其 display 属性是 grid （块元素）或 inline-grid （内联块元素）。网格容器的下级元素叫做网格项。容器划分成二维格子后，垂直方向的一列格子叫做列轨道，水平方向的一行格子叫行轨道。列轨道和行轨道分别称为列和行。
网格容器的 grid-template-columns 属性决定了划分的列数和每个列的宽度。下面的代码将容器划分为2列，宽度分别是100px和20px。
grid-template-columns: 100px 20px;
如果希望某一列能够自动填充容器的剩余宽度，可以使用 fr 单位。 fr 是fraction的意思，表示比例。下面的代码将容器划分为3列，第一列占100px，另外两列分别占据剩余宽度的1/3和2/3。
grid-template-columns: 100px 1fr 2fr;
如果希望对列宽做更细致的控制，可以使用 minmax() 函数，它有两个参数，分别是列宽的最小值和最大值。例如 grid-template-columns: minmax(100px, 1fr) 1fr; 表示第一列的宽度自小是100px，最大是1fr。
代码1 minmax函数
minmax(100px, 1fr) minmax(100px, 20%) minmax(min-content, 100px) /* min-content是不换行、不溢出时网格项需要的最小空间。 */ minmax(100px, max-content) /* max-content是不换行、不截断时网格项自然占据的空间。 */ minmax(auto, ...) /* 等价于 minmax(min-content, ...) */ minmax(..., auto) /* 等价于 minmax(..., max-content) */
如果每列的宽度设置相同，可以使用repeat函数简化编码。
代码2 repeat函数
grid-template-columns: repeat(4, 1fr); /* 划分4列，每列宽1fr。 */ grid-template-columns: repeat(4, minmax(20px, 1fr)); /* 划分4列，列宽不小于20px，不大于1fr。 */
网格项按列依次放置，超出的从下一行第一列继续，因此常常可以省略行轨道属性。行高有特殊要求的，可以使用 grid-template-rows 属性，与 grid-template-columns 类似。
行和列之间的间隔由 column-gap 和 row-gap 决定。
代码3 column-gap和row-gap
column-gap: 3px; /* 网格布局的column-gap默认为0。 */ row-gap: 3px; /* 网格布局的row-gap默认为0。 */
默认情况下，网格项从第一列开始依次放置，每个网格项占一个格子。如果修改网格项的 grid-column-start 和 grid-column-end 属性，可以调整网格项的放置位置，或让网格项横跨多个列轨道。
代码4 网格项的grid-column-start/grid-column-end属性可以调整放置位置或横跨多列
grid-column-start: 2; /* 从第1行第2列开始放置网格项。 */ grid-column-start: -1; /* 从第1行倒数第1列开始放置网格项。 */ grid-column-start: span 3; /* 从第1行第1列开始放置网格项，横跨3个行轨道。 */ grid-column-end: 2; /* 将网格项结束位置放在第1行第2列。 */ grid-column-end: -1; /* 将网格项结束位置放在第1行倒数第1列。 */ grid-column-end: span 3; /* 网格项横跨3个行轨道。 */
如果同时设置了网格项的 grid-column-start 和 grid-column-end 属性，网格项会自动跨越列轨道，不需要使用 span 关键字。类似的，设置网格项的 grid-row-start 和 grid-row-end 属性可以让网格项跨越行轨道。
为了简化编码，CSS提供了简写：
代码5 网格布局属性简写
grid-column: 1 / 3; /* grid-column-start: 1; grid-column-end: 3; */ grid-row: 1 / 3; /* grid-row-start: 1; grid-row-end: 3; */ gap: 10px 20px; /* row-gap: 10px; column-gap: 20px; */ gap: 10px; /* row-gap: 10px; column-gap: 10px; */