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

• 第一章 层叠、优先级与继承（已完结）
  • 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 子网格（新增章节，精译中 ⏳）

《CSS in Depth》新版封面

译者按
经过了 上篇 和 中篇 的历练，不知道大家对隐式网格这个知识点掌握得怎么样？虽然也尽量考虑图文并茂，但我自己总感觉少了点实战的味道。好在我新发现了 CSDN 一个类似 CodePen 一样的模块，有时间的话我会尝试把这个“下篇”中的内容放进去看看效果。先对隐式网格这个知识点来个收尾吧。

5.4.2 让网格元素填满网格轨道 Adjusting grid items to fill the grid track

至此，您已经实现了相当复杂的页面布局，其间也没有花太多精力去设置每个元素的精确位置，而是将这些计算的活儿都交给了浏览器。

还剩最后一个问题：图片放大后并没有完全填满所在的网格单元，于是图片下方就空出一小段空白来。理想情况下，每个网格元素无论顶部还是底部，都应该与同一轨道上的其他元素对齐。现在顶部倒是对齐了，但底部却没有，如图 5.16 所示：

图 5.16 图片没能完全填满网格单元，留下了多余的空间

下面来解决这个问题。回想一下，每个网格元素都是一个 <figure>。它包含了一张图片和一个标题这两个子元素：

<figure class="featured"><img src="images/monkey.jpg" alt="monkey" /><figcaption>Monkey</figcaption>
</figure>

默认情况下，每个 网格元素 都会通过拉伸来填满整个网格区域，但 子元素 例外，从而空出了多余的高度。一个简单点的解决办法是使用 Flexbox 布局。如代码清单 5.11 所示，将每个 <figure> 元素都视为一个竖直方向上的弹性容器，内部元素就会从上到下垂直排列；接着再给图片指定一个 flex-grow 值，就可以强制拉伸图片来填满空白区域。

只不过拉伸图片并不可取，因为会改变图片的宽高比（height-to-width ratio），从而导致图片变形。好在 CSS 提供了一个特殊的属性 object-fit 来处理这个问题。默认情况下，一个 <img> 图片元素的 object-fit 的属性值为 fill，也就是通过缩放整个图片来填满 <img> 元素。您也可以改成其他值来进行调节。

例如，object-fit 的属性值还可以是 cover 或 contain（如图 5.17 所示）。这些值会告诉浏览器，要在不改变图片纵横比（aspect ratio）的情况下，调整渲染容器中图片大小，具体用法如下：

• cover：通过扩展图片来填满容器（会导致图片被部分裁剪）。
• contain：通过缩放来让图片在容器内完整展示（会导致容器内留白）。

图 5.17 使用 object-fit 控制图片在容器盒内的渲染方式

这里一定要区分清楚两个概念：一个是宽高由 <img> 元素决定的容器盒（the box），另一个是要渲染的图片。默认情况下，二者的尺寸大小是相等的。object-fit 属性只能对容器盒内的图片尺寸进行控制，而容器盒本身的大小则保持不变。

因为要用 flex-grow 拉伸图片，这里应该给它加上 object-fit: cover 以防变形。这样会裁剪掉图像的一小部分边缘——这也是必要的妥协。最终效果如图 5.18 所示。有关 object-fit 属性的更多详情，可以参考 CSS-Tricks 网站的文章《A Quick Overview of object-fit and object-position》。

图 5.18 所有图片都填满了网格区域并完美对齐后的效果图

至此，所有图片和标题的上下边缘都跟网格轨道对齐了，相关样式如代码清单 5.11 所示。请将它们更新到您的样式表中：

代码清单 5.11 使用垂直方向的 Flexbox 拉伸图片并填充网格区域的样式代码

.portfolio > figure {display: flex; /* 令每个网格元素都成为垂直的 Flexbox */flex-direction: column; /* 令每个网格元素都成为垂直的 Flexbox */margin: 0;
}.portfolio img {flex: 1; /* 使用 flex-grow 让图片填满弹性容器的可用空间 */object-fit: cover; /* 允许图片在不被拉伸变形的情况下填满容器（而是裁掉边缘） */max-inline-size: 100%;
}

这样，您的摄影作品墙就大功告成了！所有元素都整整齐齐地排列在网格里，浏览器决定了垂直网格轨道的数量和尺寸大小。布局算法启用紧凑型自主流动（dense auto-flow）模式后，浏览器也可以干净利落地填满所有的空白区域。

---

---

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

	第 1 版	第 2 版
读者评分	原版：4.7（亚马逊）；中文版：9.3（豆瓣）	原版：5.0（亚马逊）；中文版：暂无，待出版
出版时间	原版：2018 年 3 月；中文版：2020 年 4 月	原版：2024 年 7 月；中文版：暂无，待出版
原价	原版：$44.99；中文版：￥139.00	原版：$59.99；中文版：暂无，待出版
现价	原版：$36.49；中文版：￥52.54 起步	原版：$52.09；中文版：暂无，待出版
原版国内预订	起步价 ￥461.00	起步价 ￥750.00

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