【CSS in Depth 2 精译_036】5.6 Grid 网格布局中与对齐相关的属性 + 5.7本章小结

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

• 第一章 层叠、优先级与继承（已完结）
  • 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.6 对齐相关的属性 ✔️
  • 5.7 本章小结 ✔️

《CSS in Depth》新版封面

5.6 对齐相关的属性 Alignment properties

网格布局模块规范里的对齐属性有一些与 Flexbox 相同，还有一些则是新属性。上一章介绍 Flexbox 布局时已经涵盖了其中大部分内容，这一节就来看看这些属性在网格布局中的用法。想要对网格布局的各个方面做进一步控制，了解这些属性或许会方便很多。

CSS 给网格布局提供了三个以 justify- 开头的对齐属性：justify-content、justify-items 以及 justify-self。它们控制了网格元素在水平方向上的位置。我是这样记的：就像在文字处理器里调整文字位置，让它们在水平方向上排布。

此外还有三个以 align- 开头的对齐属性：align-content、align-items 以及 align-self。它们控制了网格元素在垂直方向上的位置。我是通过类比 行内对齐（inline alignment） 中的 vertical-align 属性来记住它们的。这些属性如图 5.22 所示。

图 5.22 网格内的对齐属性

要设置网格容器内的网格轨道在水平和垂直方向上的位置，可以使用 justify-content 和 align-content 属性实现，尤其是在网格元素的尺寸无法填满网格容器的时候。参考以下样式代码：

.grid {display: grid;height: 1200px;grid-template-rows: repeat(4, 200px);
}

这段代码明确设置了网格容器的高度为 1200px，但水平网格轨道的有效总高度仅为 800px；网格轨道在剩下那 400px 的空间内如何分布，可以通过 align-content 属性进行设置。该属性可以设为下列有效值：

• start —— 将网格轨道放在网格容器的 左上方（top/left）。
• end —— 将网格轨道放在网格容器的 右下方（bottom/right）。
• center —— 将网格轨道放在网格容器的 中间（in the middle）。
• stretch —— 网格轨道 拉伸 至填满网格容器。
• space-between —— 将剩余空间 平均分配 到每个网格轨道之间（将覆盖任何 gap 设置）。
• space-around —— 将空间均布到每个网格轨道间，且在两端各加上 一半 的间距。
• space-evenly —— 将空间均布到每个网格轨道间，且在两端各加上 同等大小 的间距。

想了解更多对齐属性（justify/alignment properties）的示例，请访问 https://gridbyexample.com/。Grid by Example 是一个极好的网站资源，里面汇集的大量网格布局示例，都是由开发者兼 W3C 成员的 Rachel Andrew 大佬精心整理而成。

最后再来聊聊与定位相关的简写属性：place-content、place-items 以及 place-self。这些属性可以同时声明带 align-* 和 justify-* 前缀的属性值，例如：place-content: center start 等效于 align-content: center; justify-content: start。

因为网格布局的内容非常多，所以本章介绍的内容都是网格布局必须掌握的核心概念。建议您对网格布局做更多探索试验。网格有很多种组合方式，无法在一章里逐一介绍，因此您需要自我挑战一下，去尝试一些新事物。在遇到一个有趣的网页布局时，看看能否用网格布局来实现。

译注

关于水平方向对齐的那三个 justify 开头的属性，作者提供的记忆方式可能有点抽象，这里略作补充。所谓的“文字处理器”，可以将其理解为微软旗下的办公软件 Word。它在对齐一行文本的时候，使用的术语就是 justify。根据上海译文出版社 2000 年 12 月出版的《新英汉词典》（世纪版），这个单词在印刷行业中的原意为“调整（铅字）的间隔使齐行”。对照如下图所示的 Word 中英双语提示信息，可以进一步加深理解（这也是设置文字两端对齐的快捷键选择 Ctrl + J 的根本原因）：

补图1 微软办公软件 Word 就文字对齐给出的双语对照注释

5.7 本章小结 Summary

• 网格（Grid）定义了一套基于行与列的页面布局，在元素定位时实现了各元素间的相互关联。
• 网格布局与 Flexbox 布局相辅相成，共同构成了一套完整的布局系统。
• 网格布局中对同一元素定位有三种实现方案，分别对应三类写法：网格线编号、命名网格线、以及命名网格区域。可以根据实际的布局需求任选一种对您而言最直观的解决方案。
• auto-fill/auto-fit 以及隐式网格的定位在布局大量或未知数量的网格元素时效果尤为显著。
• 相比普通网格仅对单一父子结构生效的功能设定，子网格可以在深度嵌套的 DOM 结构下轻松实现元素间更深层次的对齐。
• Flexbox 布局中相同的对齐属性（alignment properties）也同样适用于网格布局。

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

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