CSS Grid 初识
布局这件事，做前端的人每天都在做。之前学的 CSS 伪类 和 CSS 属性关键字 偏重单个元素的样式控制，真正的页面布局要靠布局体系。你在之前的系列课程里已经见过 flexbox，它处理一维布局很顺手。但当你需要同时管住行和列，比如给整页划分区域的时候，flex 就有点勉强了，这时候轮到 CSS Grid 出场。
Grid 是二维布局体系，二维的意思就是行和列一起控制。一个页面从上到下分导航、内容、页脚，内容区又分侧边栏和主体，这种横竖都要管的需求，正是 Grid 的主场。
一句话开启 Grid
只要给容器加上 display: grid，这个容器就变成网格容器，它的直接子元素自动变成网格项目，依次排进格子。先看最小示例，3 列 2 行的网格放 6 个项目。
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>.grid {
display: grid; /* 开启网格上下文 */
grid-template-columns: 100px 100px 100px; /* 3 列，每列 100px */
grid-template-rows: 100px 100px; /* 2 行，每行 100px */
gap: 10px; /* 行列间距 10px */
}6 个项目从左到右、从上到下依次填入 3 乘 2 的格子，不用 float，不用手算宽度。
四个核心概念
理解 Grid 之前，先认识四个基本概念，后面所有属性都围着它们转。
- 网格线（grid line）。格子之间的分界线，分列线和行线两种，都从 1 开始编号。列线从左往右数，行线从上往下数，3 列网格就有 4 条列线，编号 1 到 4。
- 网格轨道（grid track）。两条相邻网格线之间的区域，列轨道对应列，行轨道对应行。
- 单元格（grid cell）。一个列轨道和一个行轨道相交形成的最小格子。
- 网格区域（grid area）。若干个单元格拼成的矩形区域，可以是一格，也可以跨几行几列。
| 概念 | 作用 | 注意事项 |
|---|---|---|
| 网格线 | 网格的骨架，编号从 1 开始 | 列线和行线各自独立编号 |
| 网格轨道 | 相邻两条线之间的行或列 | 轨道尺寸决定项目占位大小 |
| 单元格 | 行列相交的最小格子 | 自动排布时项目逐个填入 |
| 网格区域 | 多个单元格拼成的矩形 | 必须保持矩形，项目属性那篇细讲 |
Grid 和 Flexbox 怎么选
Flexbox 一次只处理一行或者一列，是一维的。Grid 行和列同时控制，是二维的。选型看场景，组件内部排布用 flex，整页骨架用 grid。
| 对比项 | Flexbox | Grid |
|---|---|---|
| 维度 | 一维，一行或一列 | 二维，行列同时 |
| 擅长场景 | 导航栏、按钮组、卡片内容 | 整页骨架、栅格系统、大型区域 |
| 控制方式 | 内容驱动，项目自己排 | 结构驱动，先画格子再放内容 |
| 心智模型 | 弹性盒子沿主轴排列 | 类似表格的网格，但更灵活 |
两者不是互斥的，而是互补的。外层大骨架用 Grid，组件内部单行排列交给 Flex，这个组合策略在实战篇会演示。
提一句隐式行为
上面例子项目和格子刚好相等。如果项目比格子多，比如 3 列 2 行放 8 个项目，Grid 会自动新开一行来装，新行高度默认由内容撑开。这种自动生成的轨道叫隐式轨道，怎么控制它的尺寸，容器属性那篇再讲。
小结一下。Grid 是二维布局体系，display: grid 开启网格上下文，网格线、轨道、单元格、区域四个概念是理解所有属性的基础。大布局用 grid，小排布用 flex，两者互补。