【CSS in Depth 2 精译_033】5.4 Grid 网格布局的显示网格与隐式网格（中）

当前内容所在位置（可进入专栏查看其他译好的章节内容）

• 第一章 层叠、优先级与继承（已完结）
  • 1.1 层叠
  • 1.2 继承
  • 1.3 特殊值
  • 1.4 简写属性
  • 1.5 CSS 渐进式增强技术
  • 1.6 本章小结
• 第二章 相对单位（已完结）
  • 2.1 相对单位的威力
  • 2.2 em 与 rem
  • 2.3 告别像素思维
  • 2.4 视口的相对单位
  • 2.5 无单位的数值与行高
  • 2.6 自定义属性
  • 2.7 本章小结
• 第三章 文档流与盒模型（已完结）
  • 3.1 常规文档流
  • 3.2 盒模型
  • 3.3 元素的高度
  • 3.4 负的外边距
  • 3.5 外边距折叠
  • 3.6 容器内的元素间距问题
  • 3.7 本章小结
• 第四章 Flexbox 布局（已完结）
  • 4.1 Flexbox 布局原理
  • 4.2 弹性子元素的大小
  • 4.3 弹性布局的方向
  • 4.4 对齐、间距等细节处
  • 4.5 本章小结
• 第五章 网格布局 ✔️
  • 5.1 构建基础网格（已完结）
  • 5.2 网格结构剖析 （上）
    • 5.2.1 网格线的编号（下）
    • 5.2.2 网格与 Flexbox 配合（下）
  • 5.3 两种替代语法（已完结）
    • 5.3.1 命名网格线
    • 5.3.2 命名网格区域
  • 5.4 显式网格与隐式网格（上）
    • 5.4.1 添加变化 （中） ✔️
    • 5.4.2 让网格元素填满网格轨道（下）（精译中 ⏳）
  • 5.5 子网格

文章目录

• • • 5.4.1 添加变化 Adding variety

《CSS in Depth》新版封面

译者按
网格布局的强大背后，是众多细碎的配置属性与行为控制选项。想要彻底掌握网格布局，关键在于找到一个恰当的分类方法，对这些看似零散的知识点作系统性梳理，再结合实际案例重点理解，逐个击破。这也是本书一直以来被众多前端人员奉为【CSS 进阶神作】的其中一个重要原因——合理分类。一起来看看特写图片放大效果的实现过程吧。

5.4.1 添加变化 Adding variety

接下来，让作品墙中的特写图片（即本例中的小鸟和天鹅）放大，增加一些视觉趣味性。放大前的每个网格元素都各自占据了 1 × 1 的区域。然后将特写图片的尺寸增加到 2 × 2。方法是通过样式类 featured 选中特写元素，并让它们在水平和垂直方向上都占据两个网格轨道的大小。

问题来了：由于元素按顺序排列，增加某些网格元素的尺寸将导致网格中出现空白区域，如图 5.14 所示。小鸟图之前在第三个网格元素内，但因为尺寸变大了，老鹰图的右侧单元格已经容纳不下这张图片，因此只能掉到下一行的网格轨道。

图 5.14 增加某些网格元素的尺寸大小会导致布局中出现无法容纳大元素的空白区域

当不主动设置网格元素的位置时，元素会按照默认的布局算法（placement algorithm）自行定位。默认情况下，布局算法会尝试按元素在 HTML 标记中的顺序逐列、逐行摆放。当一个元素在某一行放不下时（即该元素占据了太多网格轨道时），布局算法会将其移动到下一行，寻找足够大的空间来安置它。本例中的小鸟图就这样被挪到了下方第二行，放到了老鹰图的下方。

网格布局模块（Grid Layout Module）还提供了另一个属性 grid-auto-flow 来控制布局算法的行为。它的初始值（initial value）为 row，效果就是上面截图中的样子。如果设置为column，布局算法就会将元素优先放在网格列中，并且只有等这一列也放不下时，才会移动到下一行。

该属性还可以添加关键字 dense（如 grid-auto-flow: column dense）。这样布局算法就能紧凑地填满网格里的空白，尽管会打乱某些网格元素的顺序。加上 dense 后，较小的图片元素就会“回填”到由大图片造成的空白区域，效果如图 5.15 所示：

图 5.15 grid-auto-flow 属性添加关键字 dense 后，小网格元素就能回填网格的空白区域

让布局算法的自主流动（auto-flow）紧凑起来之后（即添加了 dense），放置大图片时留下的空白区域将由小图片优先补空。此时源码顺序还是不变（猴、老鹰、小鸟、熊），但最后那张熊图就被挪到了小鸟图前面，填补了第一行的空缺。

按照代码清单 5.10 更新样式表。改样式放大了特写图片，使其在水平和垂直方向均占据两个网格轨道，并启用了紧凑的自主流动模式。

代码清单 5.10 放大特写图片的样式代码

.portfolio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 1fr;
  gap: 1em;
  grid-auto-flow: dense; /* 启用紧凑的网格布局算法 */
}

/* 放大特写图片，使其在水平和垂直方向上各占据两个网格轨道的大小 */
.portfolio .featured {
  grid-row: span 2;
  grid-column: span 2;
}

这段样式代码（第 6 行）使用了 grid-auto-flow: dense，相当于 grid-auto-flow: row dense（前者隐含了 row 这个初始值）。然后指定特写图片的尺寸为：在水平和垂直方向上各占据两个网格轨道大小。注意，本例中只用了 span 关键字，并没有具体指明什么元素该放到什么轨道，这样布局算法就会将网格元素放到它认为合适的位置。

实际屏幕看到的效果可能跟图 5.12 不完全一致，因为本例用 auto-fill 来确定垂直网格轨道的数量，所以屏幕越宽，可以容纳的轨道数就越多；屏幕越窄，相应的轨道数就越少。我截图时的宽度约为 1000px，能装下四个网格轨道。适当调整浏览器的窗口大小，就能看到网格自动生成了多少个轨道来填充可用空间。

需要注意的是，布局算法设置为紧凑型自主流动后，可能会导致元素显示的顺序跟 HTML 里的源码顺序不一致。当用户借助键盘（如 Tab 健）或屏幕阅读工具来浏览网页时，这些辅助工具会以 HTML 中的源码顺序而非屏幕渲染顺序来浏览网页，这样可能会让用户感到困惑。

关于《CSS in Depth》（中译本书名《深入解析 CSS》）

本专栏为该书第 2 版高分译文专栏，全网首发，精译精校，持续更新，计划今年内完成全书翻译，敬请期待！！！