【CSS in Depth 2 精译_028】第五章 网格布局 + 5.1 构建基础网格

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

• 第一章 层叠、优先级与继承（已完结）
  • 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.1 构建基础网格

第五章 网格布局

本章概要

• 使用网格构建页面布局
• 理解网格布局选项
• 使用网格线和具名网格区域放置子元素
• 显式与隐式网格
• 结合 Flexbox 和网格购买连贯的网页布局

上一章介绍的 Flexbox 彻底颠覆了传统的网页布局方式，但也只能算作 CSS 布局全貌的一部分。它还有一个大哥：一个被称作 网格布局模块（Grid Layout Module，即 grid 网格） 的新规范。这两个规范共同提供了一套功能齐全的布局引擎。

本章将重点演示网格布局的用法，先概括介绍网格布局的工作原理，然后结合几个示例带您感受一下网格布局所具备的能力。它既可以轻松拿捏基础网格的构建，也具备足够强悍的实力搞定各种复杂布局，但后者必须掌握额外的新属性和关键字。本章将步步为营详细介绍，助您攻克这些知识点。

CSS 网格先是定义了一个由不同的行与列所构成的二维布局，然后再将页面元素分别放置到对应的网格中。一些元素可能只占据一个网格单元，另一些元素则可能跨越多列或多行。网格的尺寸大小既可以精确定义，也可以根据自身内容自动计算。元素既可以选择精确放置到网格某个位置，又可以在网格内自动定位，自行填充划分好的区域。一套网格系统就足以构建出如图 5.1 所示的复杂布局。

图 5.1 基础网格布局中的盒子

5.1 构建基础网格

网格的用途极其广泛，本章将通过几个示例来展示其强大功能。先来构建一个最基础的网格布局，分三列布局如图 5.2 所示的六个方框。页面对应的 HTML 标记详见代码清单 5.1。

图 5.2 包含三列两行的简单网格效果图

与上一章类似，新建一个页面并关联一个新的样式表，页面内容如下。在这段代码中，各方框分别从字母 a 到 f 进行编号，这样它们在网格中的位置就一目了然了。

代码清单 5.1 包含六个子元素的页面 HTML 标记

<div class="grid"><!-- 网格容器 -->
  <!-- 容器内的子元素变为网格元素 -->
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
  <div class="e">e</div>
  <div class="f">f</div>
</div>

跟 Flexbox 类似，网格布局也是作用在包含两个层级的 DOM 结构中。设置了 display: grid 的元素将成为一个 网格容器（grid container），其子元素则变为 网格元素（grid items）。

接下来，要用一些新的属性来定义网格的具体细节。按照如下代码更新样式表：

代码清单 5.2 基础网格布局

.grid {
  display: grid;  /* 将元素设为网格容器 */
  grid-template-columns: 1fr 1fr 1fr;  /* 定义三个等宽列 */
  grid-template-rows: 1fr 1fr;  /* 定义两个等高行 */
  gap: 0.5em;  /* 设置各网格单元格之间的间距 */
}
 
.grid > * {
  background-color: darkgray;
  color: white;
  padding: 2em;
  border-radius: 0.5em;
}

该样式分三列渲染了六个大小相同的方框（如图 5.2 所示）。这当中有好几个新的知识点，下面将详细介绍。

首先，display: grid 定义了一个网格容器，使该容器呈现出块级元素的行为特征，100% 占满可用宽度。另外也可以使用 inline-grid（没写到示例中），这样元素就会在行内流动，且宽度只能够包裹子元素，但 inline-grid 用得并不多。

接下来是新属性：grid-template-columns 和 grid-template-rows。这两个属性定义了网格每行每列的大小。本例使用了一种新单位 fr，代表每一列（或每一行）的 分数单位（fraction unit）。这个单位的作用跟 Flexbox 中的 flex-grow 属性极为相似。声明 grid-template-columns: 1fr 1fr 1fr 则设置了三个大小相同的三个等宽列。

属性值不一定非得用分数单位 fr，像 px、em 或百分数这样的单位也可以使用；也可以混搭组合使用。例如，grid-template-columns: 300px 1fr 就定义了一个固定宽度为 300px 的首列，以及一个紧跟其后的第二列，后者会填满剩余的可用空间。此外，2fr 对应的列宽是 1fr 的两倍。

和 Flexbox 布局一样，gap 属性则定义了每个网格单元之间的间距。也可以用两个值分别指定垂直及水平方向的间距（例如：gap: 0.5em 1em）。

注意

网格规范首次定稿时，gap 属性曾被命名为 grid-gap，因此早期的一些网格案例用的是 grid-gap，其工作方式相同。后来添加了更为通用的 gap 属性，并同步更新了 Flexbox 予以支持。

可以试着改改这些属性值，看看它们会对最终布局产生什么影响。试试再加一列，或者改改宽度，又或者添加或删除网格元素……本章后续布局也会继续这样试验，这是掌握新东西最好的方法。