CSS 网格布局以不同于其他方式的方式处理布局。正如其名称所示，它允许你将元素按网格形式排列。与弹性盒子（flexbox）在放置元素时较为随意、灵活（有时甚至令人困扰）不同，网格布局既提供了对元素显示位置和方式的精确控制，又具备实现响应式设计所需的灵活性。可以说，它是对抗僵尸最强大的布局工具，但随着功能增强，其复杂性也随之增加。

分割僵尸：网格专用单位

fr 单位代表网格中剩余空间的一个分数。你的布局可能因为多种原因而存在空白空间。例如，你可能希望某些列保持固定大小，而另一列随屏幕尺寸变化；或者希望某行根据内容自动调整高度。你还可以实现比例宽度设置，比如让某一列的宽度是另一列的三倍：3fr 对 1fr。简而言之，fr 单位能帮你解决响应式网站常遇到的各种屏幕尺寸问题，让你的布局即使面对异常屏幕尺寸或非标准内容长度也能保持整齐对齐，不会轻易崩溃。

值得思考的问题

网格战场：僵尸横行

display: grid：与 flexbox 类似，首先需要将父容器的 display 设置为 grid。

1.undead-parent {
2    display: grid;
3}

display: inline-grid：创建一个内联网格，其行为几乎与 grid 相同，但网格父元素保持内联状态，如同文本中的短语元素。

grid-template-columns：用于设置网格中列的大小。它可以接受多种不同的尺寸和单位。

1.undead-parent {
2    grid-template-columns: 300px 13em 1fr 2fr 30%;
3}

grid-template-rows：用于设置网格中行的大小。同样支持多种尺寸。

1.undead-parent {
2    grid-template-rows: 15em 200px 3fr 10% 2fr;
3}

grid-template：这是一个快捷属性，可在一个声明中同时设置 grid-template-rows 和 grid-template-columns。行定义在前，用斜杠 / 与列定义分隔。

1.undead-parent {
2    grid-template: 15em 200px 3fr 10% 2fr / 300px 13em 1fr 2fr 30%;
3}

column-gap：设置两列之间的间距。

1.undead-parent {
2    column-gap: 1em;
3}

row-gap：设置两行之间的间距。

1.undead-parent {
2    row-gap: 1.5em;
3}

grid-gap：这是 column-gap 和 row-gap 的缩写属性，可在一次声明中同时设置列间距和行间距。

1.undead-parent {
2    grid-gap: 1em 1.5em;
3}

可尝试的实验：

1. 添加一列和一行
2. 取消注释 grid-gap 和 grid-template 的注释，观察它们的效果

注意： Firefox 浏览器的开发者工具中内置了非常出色的网格调试功能

小大僵尸重复模式

你还可以使用一些函数和特殊关键字来创建网格列和行。请注意，以下示例以 grid-template-columns 为例，这些方法同样适用于 grid-template-rows。

max-content：寻找列或行所能使用的最大尺寸。它会尽可能占据空间，直到内容无法再扩展为止。例如，如果内容是文本且未受父元素的宽高限制，它将与文本总长度一致。只有在必要时才会换行。

1.undead-parent {
2    grid-template-columns: 1fr max-content 14em;
3}

min-content：寻找列或行在不导致子元素溢出情况下的最小尺寸。它仅占用展示内容所需的最少空间，绝不多占一个像素。

1.undead-parent {
2    grid-template-columns: 3em min-content 12em;
3}

repeat()：允许重复列或行，无论是单个还是多个重复模式。就像找到最适合自己的僵尸武器后反复使用一样。

1.undead-parent {
2    grid-template-columns: repeat(5, 1fr);
3}

minmax()：接受两个值——最小值和最大值，表示列或行的尺寸范围。

1.undead-parent {
2    grid-template-columns: 13em minmax(100px, 1fr) 1fr 1fr;
3}

可尝试的实验：

1. 添加或移除注释，观察每个关键字/函数的效果
2. 可混合使用这些函数和关键字。尝试在 repeat 中使用 min-content 或 max-content
3. 尝试重复一个 minmax() 列
4. 将 1fr 2fr 的模式重复三次