单元格与项目的区别#

这是 Grid 布局中非常容易混淆的概念。

单元格是浏览器划分的布局空间，项目是实际参与布局的 HTML 元素。

它们之间并不一定是一一对应的关系。

情况一：一个项目占据一个单元格。

这是最常见的情况，项目默认自动排列，通常一个项目占据一个单元格。

情况二：一个项目占据多个单元格。

1
.item {
2
  grid-column: 1 / 3;
3
  grid-row: 1 / 3;
4
}

项目横跨 2 行、2 列，占据 4 个单元格。

需要注意，跨行、跨列不会真正合并单元格，只是让项目占据更大的网格区域。

情况三：存在没有项目的单元格。

即使没有对应的 HTML 元素，已经建立的网格中仍然可以存在空单元格。

因此，单元格和项目不能画等号。

网格线的作用#

网格线最主要的用途是确定项目的起始位置和结束位置，从而实现跨行、跨列布局。

例如：

1
.item {
2
  grid-column: 1 / 3;
3
  grid-row: 1 / 3;
4
}

• grid-column: 1 / 3：从第 1 条列网格线到第 3 条列网格线，横跨 2 列。
• grid-row: 1 / 3：从第 1 条行网格线到第 3 条行网格线，纵跨 2 行。

也可以使用 span 表示跨越的轨道数量：

1
.item {
2
  grid-column: span 2;
3
  grid-row: span 2;
4
}

两种方式的区别：

• 1 / 3：指定起始和结束网格线。
• span 2：指定跨越 2 条轨道，起始位置可以由自动布局确定。

网格线能不能自定义？#

可以为网格线命名：

1
.container {
2
  display: grid;
3
  grid-template-columns:
4
    [start] 100px
5
    [middle] 200px
6
    [end];
7
}
8

9
.item {
10
  grid-column: start / end;
11
}

不过网格线属于抽象的布局参考线，并不是真正显示出来的 CSS 边框，不能直接像 border 一样设置颜色和线条样式。

1. 间距（Gap）#

间距用于控制相邻行轨道、列轨道之间的距离。

常见属性：

1
.container {
2
  display: grid;
3
  grid-template-columns: 100px 200px;
4
  grid-template-rows: 80px 120px;
5
  gap: 10px 20px;
6
}

这里：

• 行间距：10px。
• 列间距：20px。

间距到底占不占单元格的空间？

间距不属于单元格，也不计入普通轨道自身的尺寸。

但是，间距会占据整个网格中的空间。

例如：

1
.container {
2
  display: grid;
3
  grid-template-columns: 100px 200px;
4
  column-gap: 20px;
5
}

显式网格的总宽度为：

1
100px + 20px + 200px = 320px

其中 20px 是额外的轨道间距，两个列轨道仍然分别宽 100px 和 200px。

如果使用 1fr 等弹性轨道，在空间受限时，浏览器会先考虑间距，再将剩余可分配空间分给弹性轨道。

间距与网格线的关系

CSS Grid 规范中，可以将 gap 形象地理解为网格线具有了厚度。

但要注意：

• 这只是布局计算层面的理解。
• 不意味着网格线真的变成了可见的粗线。
• 也不能认为网格线等于轨道宽度加间距。

2. 区域（Area）#

网格区域（Grid Area）是由四条网格线限定的矩形空间，可以包含一个或多个单元格。

可以通过 grid-template-areas 为区域命名：

1
<div class="container">
2
  <header class="header">头部</header>
3
  <main class="main">主体</main>
4
  <aside class="aside">侧边栏</aside>
5
</div>
6
.container {
7
  display: grid;
8
  grid-template-columns: 100px 200px 100px;
9
  grid-template-rows: 80px 120px;
10
  gap: 10px;
11

12
  grid-template-areas:
13
    "header header aside"
14
    "main   main   aside";
15
}
16

17
.header {
18
  grid-area: header;
19
}
20

21
.main {
22
  grid-area: main;
23
}
24

25
.aside {
26
  grid-area: aside;
27
}

这里虽然只有三个项目，但实际上建立了 2 行 3 列，共 6 个单元格。

• header：占据第一行的前两个单元格。
• main：占据第二行的前两个单元格。
• aside：占据第三列的两个单元格。

注意：

区域并不一定要通过 **grid-template-areas** 命名。

通过 grid-column 和 grid-row 指定的矩形范围，同样是网格区域。

单元格可以理解为最小的网格区域，而更大的区域则可以包含多个单元格及它们之间的间距。

3. 内容（Content）#

内容通常指项目内部的文字、图片、按钮等实际内容，而不是另一种网格结构。

例如：

1
<div class="container">
2
  <div class="item">
3
    <h3>文章标题</h3>
4
    <p>文章内容</p>
5
  </div>
6
</div>

这里：

• .container：Grid 容器。
• .item：Grid 项目。
• h3 和 p：项目内部的内容元素。

内容会影响元素自身的尺寸，并可能影响使用 auto 等尺寸规则的轨道。

Grid 还提供了对齐相关属性：

常见的水平书写模式下，行内方向通常是水平，块级方向通常是垂直。

需要区分：项目的对齐与项目内部文字的对齐不是同一回事。

4. 轨道（Track）#

轨道是 Grid 布局中用于定义行、列空间尺寸的概念。

轨道分为两种：

• 列轨道（Column Track）：两条相邻列网格线之间的列空间，其宽度决定这一列单元格的宽度。
• 行轨道（Row Track）：两条相邻行网格线之间的行空间，其高度决定这一行单元格的高度。

例如：

1
.container {
2
  display: grid;
3
  grid-template-columns: 100px 200px 100px;
4
  grid-template-rows: 80px 120px;
5
}

这里建立了：

• 3 条列轨道。
• 2 条行轨道。
• 6 个单元格。

轨道与单元格有什么区别？

可以借助 Excel 来理解：

• 轨道类似 Excel 中的一整行或一整列。
• 单元格类似 Excel 中行与列交叉形成的格子。

不过轨道并不是将单元格的宽度或高度累加起来得到的。

例如第一列宽 100px，那么该列每个单元格都宽 100px，而不是整列所有单元格宽度加起来为 100px。

轨道与间距有什么关系？

轨道是相邻、平行网格线之间的带状空间，不能把它理解成一节一节的独立盒子。

列轨道纵向延伸时会经过行间距，行轨道横向延伸时也会经过列间距。

但：

• 列轨道的宽度不包含 column-gap。
• 行轨道的高度不包含 row-gap。

因此，虽然间距会影响整个网格的尺寸，但不会直接计入普通轨道自身的宽度或高度。

1. 基本使用#

1
.container {
2
  display: grid;
3
  grid-template-columns: 100px 200px 100px;
4
  grid-template-rows: 80px 120px;
5
}

表示：

• 3 条列轨道：宽度分别为 100px、200px、100px。
• 2 条行轨道：高度分别为 80px、120px。
• 两者交叉形成 6 个单元格。

注意：定义了 6 个单元格，不代表必须有 6 个项目。 即使只有两个 HTML 子元素，这套网格结构仍然存在。

2. 常用属性值#

fr 单位

fr 表示分配给弹性轨道的空间份额。

1
.container {
2
  display: grid;
3
  grid-template-columns: 1fr 2fr 1fr;
4
}

在空间充足且没有额外尺寸限制的情况下，三列按照 1:2:1 分配可用空间。

repeat() 函数

用于简化重复的轨道定义。

1
.container {
2
  display: grid;
3
  grid-template-columns: repeat(3, 100px);
4
}

等价于：

1
grid-template-columns: 100px 100px 100px;

minmax() 函数

用于设置轨道尺寸的最小值和最大值。

1
.container {
2
  display: grid;
3
  grid-template-columns: repeat(3, minmax(100px, 1fr));
4
}

每列最小宽度为 100px，空间充足时可以弹性扩展。

需要注意，最小尺寸限制可能导致网格在容器较窄时溢出。

1. row（默认）#

1
.container {
2
  display: grid;
3
  grid-template-columns: repeat(3, 100px);
4
  grid-auto-flow: row;
5
}

假设有 6 个项目：

1
┌───┬───┬───┐
2
│ 1 │ 2 │ 3 │
3
├───┼───┼───┤
4
│ 4 │ 5 │ 6 │
5
└───┴───┴───┘

项目优先从左到右排列，当前行无法继续放置时，自动进入下一行。

2. column#

1
.container {
2
  display: grid;
3
  grid-template-rows: repeat(3, 80px);
4
  grid-auto-flow: column;
5
  grid-auto-columns: 100px;
6
}

假设有 6 个项目：

1
┌───┬───┐
2
│ 1 │ 4 │
3
├───┼───┤
4
│ 2 │ 5 │
5
├───┼───┤
6
│ 3 │ 6 │
7
└───┴───┘

项目优先沿列方向排列，当前列无法继续放置时，自动进入下一列。

3. dense#

1
.container {
2
  display: grid;
3
  grid-template-columns: repeat(3, 100px);
4
  grid-auto-flow: row dense;
5
}

当某些项目跨越多列而产生空位时，dense 会尝试使用后续能够放入空位的项目进行填补。

注意：dense 可能导致项目的视觉排列顺序与 HTML 源码顺序不同，因此需要考虑键盘导航和阅读顺序。

1. 显式网格和隐式网格#

• 显式网格：通过 grid-template-columns、grid-template-rows 等属性明确定义的网格。
• 隐式网格：当现有显式网格无法容纳项目，或项目被定位到显式网格之外时，浏览器自动补充的网格轨道。

2. grid-auto-rows#

1
.container {
2
  display: grid;
3
  grid-template-columns: repeat(3, 100px);
4
  grid-auto-rows: 80px;
5
  gap: 10px;
6
}

这里明确规定了三列，但没有定义显式行轨道。

浏览器会根据项目数量自动创建行，每条自动创建的行轨道高 80px。

例如有 9 个项目，就会自动排列成 3 行 3 列。

3. grid-auto-columns#

1
.container {
2
  display: grid;
3
  grid-template-rows: repeat(2, 100px);
4
  grid-auto-flow: column;
5
  grid-auto-columns: 150px;
6
  gap: 10px;
7
}

这里定义了两行，项目按照列方向排列。

当需要新的列时，浏览器会自动创建隐式列轨道，每列宽 150px。

容易混淆的区别：

• grid-template-rows / columns：定义显式网格轨道。
• grid-auto-rows / columns：控制自动创建的隐式轨道尺寸。
• grid-auto-flow：控制项目的自动放置方向及是否尝试填补空位。

grid-auto-rows 和 grid-auto-columns 并不是用来指定创建多少行、多少列的。

1. 基本使用#

1
.container {
2
  display: grid;
3
  grid-template-columns: repeat(3, 100px);
4
  grid-template-rows: repeat(2, 80px);
5

6
  row-gap: 10px;
7
  column-gap: 20px;
8
}

可以简写为：

1
.container {
2
  gap: 10px 20px;
3
}

其中：

• 第一个值：row-gap。
• 第二个值：column-gap。

如果只设置一个值：

1
.container {
2
  gap: 10px;
3
}

表示行间距、列间距均为 10px。

2. 间距和轨道的关系#

1
.container {
2
  display: grid;
3
  grid-template-columns: 100px 200px;
4
  column-gap: 20px;
5
}

网格在列方向上的总尺寸为：

1
100px + 20px + 200px = 320px

注意：

• gap 不属于单元格，也不计入普通轨道自身的尺寸。
• 固定尺寸的轨道不会因为设置 gap 而自动缩小。
• 如果轨道使用 fr 等弹性尺寸，则需要在分配可用空间时考虑 gap。
• 当项目跨越多条轨道时，其占据的网格区域包含中间的 gap。

从布局计算角度，也可以把 gap 想象成网格线具有了厚度，但网格线并不是真实可见的边框。

1. 基本使用#

1
<div class="container">
2
  <header class="header">头部</header>
3
  <main class="main">主体</main>
4
  <aside class="aside">侧边栏</aside>
5
  <footer class="footer">底部</footer>
6
</div>
7
.container {
8
  display: grid;
9

10
  grid-template-columns: 200px 1fr;
11
  grid-template-rows: 80px 1fr 60px;
12

13
  grid-template-areas:
14
    "header header"
15
    "aside  main"
16
    "footer footer";
17

18
  gap: 10px;
19
  min-height: 500px;
20
}
21

22
.header {
23
  grid-area: header;
24
}
25

26
.main {
27
  grid-area: main;
28
}
29

30
.aside {
31
  grid-area: aside;
32
}
33

34
.footer {
35
  grid-area: footer;
36
}

布局结构为：

1
┌─────────────────┐
2
│      header     │
3
├───────┬─────────┤
4
│ aside │  main   │
5
├───────┴─────────┤
6
│      footer     │
7
└─────────────────┘

2. 使用规则#

• 同名区域必须组成一个连续的矩形。
• 一个区域可以占据一个或多个单元格。
• 使用 . 可以表示不属于任何命名区域的单元格。
• 每行必须声明相同数量的单元格名称或占位符。
• grid-template-areas 可以建立显式网格结构，即使没有另外设置行高、列宽。

例如：

1
grid-template-areas:
2
  "header header"
3
  "main   .";

其中 . 表示未命名的单元格。

注意：区域不是新的 HTML 元素，也不会真正合并单元格，只是定义了项目可以占据的网格空间。

1. 常用属性值#

2. 基本使用#

1
.container {
2
  display: grid;
3
  grid-template-columns: repeat(3, 150px);
4
  grid-template-rows: 150px;
5

6
  align-items: center;
7
  justify-items: center;
8
}

表示让所有项目在各自的网格区域内水平、垂直居中。

可以简写为：

1
.container {
2
  place-items: center;
3
}

3. place-items 的两个值#

1
.container {
2
  place-items: start end;
3
}

等价于：

1
.container {
2
  align-items: start;
3
  justify-items: end;
4
}

第一个值控制 **align-items**，第二个值控制 **justify-items**。

注意：

这三个都是容器属性，统一控制项目在网格区域中的对齐方式。

如果希望单独控制某个项目，可以使用项目属性：

• align-self
• justify-self
• place-self

另外，项目的对齐不等于项目内部文字的对齐。

1. 常用属性值#

2. 基本使用#

1
.container {
2
  display: grid;
3

4
  width: 500px;
5
  height: 400px;
6

7
  grid-template-columns: repeat(2, 100px);
8
  grid-template-rows: repeat(2, 80px);
9

10
  gap: 10px;
11

12
  align-content: center;
13
  justify-content: center;
14
}

这里网格轨道集合的宽度为 210px，高度为 170px。

由于容器宽 500px、高 400px，还存在剩余空间，因此可以将整个网格居中。

可以简写为：

1
.container {
2
  place-content: center;
3
}

3. place-content 的两个值#

1
.container {
2
  place-content: start center;
3
}

等价于：

1
.container {
2
  align-content: start;
3
  justify-content: center;
4
}

4. items 和 content 的区别#

这是 Grid 中容易混淆的一组属性。

简单记忆：

• items：调整项目的位置。
• content：调整网格轨道整体的位置及分布。

注意：align-content、justify-content 并不是任何时候都能明显改变布局。

例如，使用 1fr 的轨道可能已经占满可用空间，此时没有剩余空间供这些属性分配，对齐效果就可能不明显。

1. grid-template#

grid-template 是以下三个属性的简写：

• grid-template-rows
• grid-template-columns
• grid-template-areas

基本写法：

1
.container {
2
  display: grid;
3

4
  grid-template:
5
    80px 120px
6
    / 100px 200px;
7
}

等价于：

1
.container {
2
  grid-template-rows: 80px 120px;
3
  grid-template-columns: 100px 200px;
4
}

也可以同时定义命名区域：

1
.container {
2
  display: grid;
3

4
  grid-template:
5
    "header header" 80px
6
    "aside main" 1fr
7
    / 200px 1fr;
8
}

这里：

• 第一行高 80px。
• 第二行占据剩余的弹性空间。
• 第一列宽 200px。
• 第二列使用 1fr。
• 同时定义了 header、aside、main 三个区域。

2. grid#

grid 是范围更广的简写属性，可以同时设置显式网格和隐式网格相关配置。

它涉及：

• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid-auto-rows
• grid-auto-columns
• grid-auto-flow

例如：

1
.container {
2
  display: grid;
3

4
  grid: 80px 120px / 100px 200px;
5
}

这会定义两条显式行轨道和两条显式列轨道，同时将相关的其他 Grid 子属性重置为初始值。

3. 两者的区别#

注意：

• grid 的写法较灵活，但语法也更复杂。
• grid 不包含 gap、align-items、justify-items 等对齐和间距属性。
• 使用简写时要注意其他相关子属性可能被重置。

实际开发中，通常更推荐分别使用 grid-template-columns、grid-template-rows、grid-auto-flow 等属性，方便阅读和维护。

1. 基本使用#

首先创建一个 3 行 3 列的网格：

1
.container {
2
  display: grid;
3
  grid-template-columns: repeat(3, 100px);
4
  grid-template-rows: repeat(3, 100px);
5
  gap: 10px;
6
}

然后指定项目的位置：

1
.item {
2
  grid-column-start: 1;
3
  grid-column-end: 3;
4
  grid-row-start: 1;
5
  grid-row-end: 3;
6
}

表示：

• 列方向：从第 1 条列网格线到第 3 条列网格线，跨越 2 列。
• 行方向：从第 1 条行网格线到第 3 条行网格线，跨越 2 行。
• 最终项目占据 2 行 2 列，共 4 个单元格对应的矩形区域。

注意：指定的是网格线编号，而不是单元格编号。

例如一个 3 行 3 列的显式网格，在两个方向上分别有 4 条网格线。

2. 常用属性值#

例如：

1
.item {
2
  grid-column-start: 1;
3
  grid-column-end: span 2;
4
}

表示项目从第 1 条列网格线开始，横跨 2 列。

还可以通过负数引用显式网格的末端网格线：

1
.item {
2
  grid-column-start: 1;
3
  grid-column-end: -1;
4
}

这里表示从第 1 条列网格线延伸到显式网格的最后一条列网格线。

1. 基本使用#

1
.item {
2
  grid-column: 1 / 3;
3
  grid-row: 1 / 3;
4
}

等价于：

1
.item {
2
  grid-column-start: 1;
3
  grid-column-end: 3;
4

5
  grid-row-start: 1;
6
  grid-row-end: 3;
7
}

其中 / 用于分隔起始位置和结束位置。

2. 常见写法#

grid-row 的使用方式相同，只是控制行方向。

3. 跨列和跨行#

跨列：

1
.item {
2
  grid-column: span 2;
3
}

表示项目横跨 2 条列轨道。

跨行：

1
.item {
2
  grid-row: span 2;
3
}

表示项目横跨 2 条行轨道。

同时跨行、跨列：

1
.item {
2
  grid-column: 1 / 3;
3
  grid-row: 1 / 3;
4
}

表示项目占据一个 2 行 2 列的矩形区域。

需要注意：

• 项目跨越多个单元格，并不意味着单元格被真正合并。
• 项目跨越的区域包含中间的 gap。
• 项目定位后，如果与其他项目占据相同区域，可能发生重叠。

1. 使用命名区域#

首先通过容器属性 grid-template-areas 定义区域：

1
.container {
2
  display: grid;
3

4
  grid-template-columns: 200px 1fr;
5
  grid-template-rows: 80px 200px;
6

7
  grid-template-areas:
8
    "header header"
9
    "aside  main";
10
}

然后通过项目属性 grid-area 指定位置：

1
.header {
2
  grid-area: header;
3
}
4

5
.aside {
6
  grid-area: aside;
7
}
8

9
.main {
10
  grid-area: main;
11
}

其中：

• header：占据第一行的两列。
• aside：占据第二行第一列。
• main：占据第二行第二列。

**grid-template-areas** 是容器属性，**grid-area** 是项目属性。

2. 使用网格线定位#

grid-area 还可以直接指定四条网格线：

1
.item {
2
  grid-area: 1 / 2 / 3 / 4;
3
}

其顺序为：

1
grid-area:
2
  row-start / column-start / row-end / column-end;

对应：

1
.item {
2
  grid-row-start: 1;
3
  grid-column-start: 2;
4
  grid-row-end: 3;
5
  grid-column-end: 4;
6
}

表示项目：

• 从第 1 条行网格线到第 3 条行网格线。
• 从第 2 条列网格线到第 4 条列网格线。

最终横跨 2 行、2 列。

3. grid-area 与 grid-column、grid-row 的区别#

例如：

1
.item {
2
  grid-column: 2 / 4;
3
  grid-row: 1 / 3;
4
}

可以写成：

1
.item {
2
  grid-area: 1 / 2 / 3 / 4;
3
}

注意：区域是布局空间，项目是实际元素。使用 **grid-area** 不会真正创建或合并 HTML 元素。

1. 常用属性值#

2. align-self#

用于控制单个项目在块级方向上的对齐。

1
.container {
2
  display: grid;
3
  grid-template-columns: repeat(3, 150px);
4
  grid-template-rows: 150px;
5
}
6

7
.item {
8
  align-self: center;
9
}

在常见水平书写模式下，项目会在所在网格区域内垂直居中。

3. justify-self#

用于控制单个项目在行内方向上的对齐。

1
.item {
2
  justify-self: center;
3
}

在常见水平书写模式下，项目会在所在网格区域内水平居中。

4. place-self#

place-self 是 align-self 和 justify-self 的简写属性。

1
.item {
2
  place-self: center;
3
}

等价于：

1
.item {
2
  align-self: center;
3
  justify-self: center;
4
}

也可以指定两个值：

1
.item {
2
  place-self: start end;
3
}

等价于：

1
.item {
2
  align-self: start;
3
  justify-self: end;
4
}

第一个值对应 **align-self**，第二个值对应 **justify-self**。

5. items 和 self 的区别#

Grid 容器属性中还有一组非常相似的属性：

• align-items
• justify-items
• place-items

它们和项目属性的对应关系如下：

区别：

• *-items：设置在 Grid 容器上，统一控制项目的对齐。
• *-self：设置在 Grid 项目上，单独控制某个项目的对齐。

例如：

1
.container {
2
  display: grid;
3
  grid-template-columns: repeat(3, 150px);
4
  grid-template-rows: 150px;
5

6
  place-items: center;
7
}
8

9
.item-2 {
10
  place-self: start;
11
}

这里所有项目默认在各自的网格区域内居中，但 .item-2 单独靠起始位置对齐。

注意：

这组属性控制的是项目自身在网格区域中的对齐，不是项目内部文字的对齐。

如果项目设置了固定宽高，对齐效果通常更容易观察；如果项目默认拉伸填充整个网格区域，视觉上可能不容易看出位置变化。