CSS 网格布局（Grid Layout）是一个强大的 2D 布局系统，可精确地控制页面的行和列布局，比 Flex 更适合结构化排布。
通过将一个元素样式的 display 属性设为 grid，可以将该元素设为网格布局的 容器。
通过容器的 grid-template-columns 属性可以配置网格的列，通过 grid-template-rows 属性可以配置网络的行。
示例：
<!-- 网格有四列，宽度依次为 40px 80px 120px 160px -->
<div style="display:grid; grid-template-columns:40px 80px 120px 160px;">
<div style="background-color:red;height:40px;"></div>
<div style="background-color:yellow;height:40px;"></div>
<div style="background-color:blue;height:40px;"></div>
<div style="background-color:orange;height:40px;"></div>
<div style="background-color:green;height:40px;"></div>
<div style="background-color:purple;height:40px;"></div>
<div style="background-color:cyan;height:40px;"></div>
<div style="background-color:pink;height:40px;"></div>
</div>
可以使用特殊的单位 fr 创建宽度相同的列，例如：
<!-- 网格有四列，宽度相同 -->
<div style="display:grid; grid-template-columns:1fr 1fr 1fr 1fr;">
<div style="background-color:red;height:40px;"></div>
<div style="background-color:yellow;height:40px;"></div>
<div style="background-color:blue;height:40px;"></div>
<div style="background-color:orange;height:40px;"></div>
<div style="background-color:green;height:40px;"></div>
<div style="background-color:purple;height:40px;"></div>
<div style="background-color:cyan;height:40px;"></div>
<div style="background-color:pink;height:40px;"></div>
</div>
可以使用 repeat 函数简化代码。
repeat(重复次数, 被重复的值)
示例：
<!-- 网格有四列，宽度相同 -->
<div style="display:grid; grid-template-columns:repeat(4, 1fr);">
<div style="background-color:red;height:40px;"></div>
<div style="background-color:yellow;height:40px;"></div>
<div style="background-color:blue;height:40px;"></div>
<div style="background-color:orange;height:40px;"></div>
<div style="background-color:green;height:40px;"></div>
<div style="background-color:purple;height:40px;"></div>
<div style="background-color:cyan;height:40px;"></div>
<div style="background-color:pink;height:40px;"></div>
</div>
可以使用 minmax 函数设置单元格宽度的最小值和最大值，通常与 repeat 搭配，适用于响应式设计。
repeat(重复次数, minmax(最小宽度, 最大宽度))
重复次数通常使用 auto-fill 和 auto-fit：
auto-fill 满足宽度的前提下，单元格数量尽可能多
auto-fit 满足宽度的前提下，填满行
示例：
<!-- 单元格宽度最小 100px，最大 1fr（无限），自动填满行宽度 -->
<div style="display:grid; grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));">
<div style="background-color:red;height:40px;"></div>
<div style="background-color:yellow;height:40px;"></div>
<div style="background-color:blue;height:40px;"></div>
<div style="background-color:orange;height:40px;"></div>
</div>
<!-- 单元格宽度最小 100px，最大 1fr（无限），自动填满行宽度 -->
<div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));">
<div style="background-color:red;height:40px;"></div>
<div style="background-color:yellow;height:40px;"></div>
<div style="background-color:blue;height:40px;"></div>
<div style="background-color:orange;height:40px;"></div>
</div>
上例中，单元格的最小宽度是 100px，最大宽度是无限。当网格容器的宽度为 500px 时， 若 \(列数 \gt 5\)，则单元格宽度小于 100px 不满足宽度要求。因此 \(列数 \leq 5\) 。
auto-fill倾向于单元格更多，因此列数为 5，单元格宽度为 100px，四个元素占前四列。
auto-fit倾向填满行，由于子元素数量只有四个，因此列数为4，单元格宽度为 125px。