當(dāng)前內(nèi)容所在位置（可進(jìn)入專(zhuān)欄查看其他譯好的章節(jié)內(nèi)容）

• 第一章 層疊、優(yōu)先級(jí)與繼承（已完結(jié)）
  • 1.1 層疊
  • 1.2 繼承
  • 1.3 特殊值
  • 1.4 簡(jiǎn)寫(xiě)屬性
  • 1.5 CSS 漸進(jìn)式增強(qiáng)技術(shù)
  • 1.6 本章小結(jié)
• 第二章 相對(duì)單位（已完結(jié)）
  • 2.1 相對(duì)單位的威力
  • 2.2 em 與 rem
  • 2.3 告別像素思維
  • 2.4 視口的相對(duì)單位
  • 2.5 無(wú)單位的數(shù)值與行高
  • 2.6 自定義屬性
  • 2.7 本章小結(jié)
• 第三章 文檔流與盒模型（已完結(jié)）
  • 3.1 常規(guī)文檔流
  • 3.2 盒模型
  • 3.3 元素的高度
  • 3.4 負(fù)的外邊距
  • 3.5 外邊距折疊
  • 3.6 容器內(nèi)的元素間距問(wèn)題
  • 3.7 本章小結(jié)
• 第四章 Flexbox 布局（已完結(jié)）
  • 4.1 Flexbox 布局原理
  • 4.2 彈性子元素的大小
  • 4.3 彈性布局的方向
  • 4.4 對(duì)齊、間距等細(xì)節(jié)處
  • 4.5 本章小結(jié)
• 第五章 網(wǎng)格布局（已完結(jié)） ??
  • 5.1 構(gòu)建基礎(chǔ)網(wǎng)格
  • 5.2 網(wǎng)格結(jié)構(gòu)剖析 （上）
    • 5.2.1 網(wǎng)格線(xiàn)的編號(hào)（下）
    • 5.2.2 網(wǎng)格與 Flexbox 配合（下）
  • 5.3 兩種替代語(yǔ)法
    • 5.3.1 命名網(wǎng)格線(xiàn)
    • 5.3.2 命名網(wǎng)格區(qū)域
  • 5.4 顯式網(wǎng)格與隱式網(wǎng)格（上）
    • 5.4.1 添加變化 （中）
    • 5.4.2 讓網(wǎng)格元素填滿(mǎn)網(wǎng)格軌道（下）
  • 5.5 子網(wǎng)格（全新增補(bǔ)內(nèi)容）
  • 5.6 對(duì)齊相關(guān)的屬性 ??
  • 5.7 本章小結(jié) ??

《CSS in Depth》新版封面

5.6 對(duì)齊相關(guān)的屬性 Alignment properties

網(wǎng)格布局模塊規(guī)范里的對(duì)齊屬性有一些與 Flexbox 相同，還有一些則是新屬性。上一章介紹 Flexbox 布局時(shí)已經(jīng)涵蓋了其中大部分內(nèi)容，這一節(jié)就來(lái)看看這些屬性在網(wǎng)格布局中的用法。想要對(duì)網(wǎng)格布局的各個(gè)方面做進(jìn)一步控制，了解這些屬性或許會(huì)方便很多。

CSS 給網(wǎng)格布局提供了三個(gè)以 justify- 開(kāi)頭的對(duì)齊屬性：justify-content、justify-items 以及 justify-self。它們控制了網(wǎng)格元素在水平方向上的位置。我是這樣記的：就像在文字處理器里調(diào)整文字位置，讓它們?cè)谒椒较蛏吓挪肌?/p>

此外還有三個(gè)以 align- 開(kāi)頭的對(duì)齊屬性：align-content、align-items 以及 align-self。它們控制了網(wǎng)格元素在垂直方向上的位置。我是通過(guò)類(lèi)比 行內(nèi)對(duì)齊（inline alignment） 中的 vertical-align 屬性來(lái)記住它們的。這些屬性如圖 5.22 所示。

圖 5.22 網(wǎng)格內(nèi)的對(duì)齊屬性

要設(shè)置網(wǎng)格容器內(nèi)的網(wǎng)格軌道在水平和垂直方向上的位置，可以使用 justify-content 和 align-content 屬性實(shí)現(xiàn)，尤其是在網(wǎng)格元素的尺寸無(wú)法填滿(mǎn)網(wǎng)格容器的時(shí)候。參考以下樣式代碼：

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

這段代碼明確設(shè)置了網(wǎng)格容器的高度為 1200px，但水平網(wǎng)格軌道的有效總高度僅為 800px；網(wǎng)格軌道在剩下那 400px 的空間內(nèi)如何分布，可以通過(guò) align-content 屬性進(jìn)行設(shè)置。該屬性可以設(shè)為下列有效值：

• start —— 將網(wǎng)格軌道放在網(wǎng)格容器的 左上方（top/left）。
• end —— 將網(wǎng)格軌道放在網(wǎng)格容器的 右下方（bottom/right）。
• center —— 將網(wǎng)格軌道放在網(wǎng)格容器的 中間（in the middle）。
• stretch —— 網(wǎng)格軌道 拉伸 至填滿(mǎn)網(wǎng)格容器。
• space-between —— 將剩余空間 平均分配 到每個(gè)網(wǎng)格軌道之間（將覆蓋任何 gap 設(shè)置）。
• space-around —— 將空間均布到每個(gè)網(wǎng)格軌道間，且在兩端各加上 一半 的間距。
• space-evenly —— 將空間均布到每個(gè)網(wǎng)格軌道間，且在兩端各加上 同等大小 的間距。

想了解更多對(duì)齊屬性（justify/alignment properties）的示例，請(qǐng)?jiān)L問(wèn) https://gridbyexample.com/。Grid by Example 是一個(gè)極好的網(wǎng)站資源，里面匯集的大量網(wǎng)格布局示例，都是由開(kāi)發(fā)者兼 W3C 成員的 Rachel Andrew 大佬精心整理而成。

最后再來(lái)聊聊與定位相關(guān)的簡(jiǎn)寫(xiě)屬性：place-content、place-items 以及 place-self。這些屬性可以同時(shí)聲明帶 align-* 和 justify-* 前綴的屬性值，例如：place-content: center start 等效于 align-content: center; justify-content: start。

因?yàn)榫W(wǎng)格布局的內(nèi)容非常多，所以本章介紹的內(nèi)容都是網(wǎng)格布局必須掌握的核心概念。建議您對(duì)網(wǎng)格布局做更多探索試驗(yàn)。網(wǎng)格有很多種組合方式，無(wú)法在一章里逐一介紹，因此您需要自我挑戰(zhàn)一下，去嘗試一些新事物。在遇到一個(gè)有趣的網(wǎng)頁(yè)布局時(shí)，看看能否用網(wǎng)格布局來(lái)實(shí)現(xiàn)。

譯注

關(guān)于水平方向?qū)R的那三個(gè) justify 開(kāi)頭的屬性，作者提供的記憶方式可能有點(diǎn)抽象，這里略作補(bǔ)充。所謂的“文字處理器”，可以將其理解為微軟旗下的辦公軟件 Word。它在對(duì)齊一行文本的時(shí)候，使用的術(shù)語(yǔ)就是 justify。根據(jù)上海譯文出版社 2000 年 12 月出版的《新英漢詞典》（世紀(jì)版），這個(gè)單詞在印刷行業(yè)中的原意為“調(diào)整（鉛字）的間隔使齊行”。對(duì)照如下圖所示的 Word 中英雙語(yǔ)提示信息，可以進(jìn)一步加深理解（這也是設(shè)置文字兩端對(duì)齊的快捷鍵選擇 Ctrl + J 的根本原因）：

補(bǔ)圖1 微軟辦公軟件 Word 就文字對(duì)齊給出的雙語(yǔ)對(duì)照注釋

---

5.7 本章小結(jié) Summary

• 網(wǎng)格（Grid）定義了一套基于行與列的頁(yè)面布局，在元素定位時(shí)實(shí)現(xiàn)了各元素間的相互關(guān)聯(lián)。
• 網(wǎng)格布局與 Flexbox 布局相輔相成，共同構(gòu)成了一套完整的布局系統(tǒng)。
• 網(wǎng)格布局中對(duì)同一元素定位有三種實(shí)現(xiàn)方案，分別對(duì)應(yīng)三類(lèi)寫(xiě)法：網(wǎng)格線(xiàn)編號(hào)、命名網(wǎng)格線(xiàn)、以及命名網(wǎng)格區(qū)域?？梢愿鶕?jù)實(shí)際的布局需求任選一種對(duì)您而言最直觀(guān)的解決方案。
• auto-fill/auto-fit 以及隱式網(wǎng)格的定位在布局大量或未知數(shù)量的網(wǎng)格元素時(shí)效果尤為顯著。
• 相比普通網(wǎng)格僅對(duì)單一父子結(jié)構(gòu)生效的功能設(shè)定，子網(wǎng)格可以在深度嵌套的 DOM 結(jié)構(gòu)下輕松實(shí)現(xiàn)元素間更深層次的對(duì)齊。
• Flexbox 布局中相同的對(duì)齊屬性（alignment properties）也同樣適用于網(wǎng)格布局。

---

---

關(guān)于《CSS in Depth》（中譯本書(shū)名《深入解析 CSS》）

	第 1 版	第 2 版
讀者評(píng)分	原版：4.7（亞馬遜）；中文版：9.3（豆瓣）	原版：5.0（亞馬遜）；中文版：暫無(wú)，待出版
出版時(shí)間	原版：2018 年 3 月；中文版：2020 年 4 月	原版：2024 年 7 月；中文版：暫無(wú)，待出版
原價(jià)	原版：$44.99；中文版：￥139.00	原版：$59.99；中文版：暫無(wú)，待出版
現(xiàn)價(jià)	原版：$36.49；中文版：￥52.54 起步	原版：$52.09；中文版：暫無(wú)，待出版
原版國(guó)內(nèi)預(yù)訂	起步價(jià) ￥461.00	起步價(jià) ￥750.00

本專(zhuān)欄為該書(shū)第 2 版高分譯文專(zhuān)欄，全網(wǎng)首發(fā)，精譯精校，持續(xù)更新，計(jì)劃今年內(nèi)完成全書(shū)翻譯，敬請(qǐng)期待！！！