A07 Grid 布局

摘要：Grid 把容器切成行列网格，项目按行列定位。相比 Flex 的一维排列，Grid 能同时约束两个方向，因此「三栏 + 页脚」「卡片等宽等高的网格」这类结构用 Grid 代码更短。本文给出 fr 单位的含义、auto-fit 与 minmax 组合的自适应写法，以及 grid-template-areas 的命名布局。
关键词：Grid，fr，网格线，minmax，grid-template-areas

所属：frontend/css / A-入门 ｜ 上一篇：A06-Flex布局 ｜ 下一篇：A08-响应式与媒体查询

1 引言

二维布局的难点是「行列同时对齐」。手写宽度百分比 + 浮动可以做到，但列数变化时要重算所有值。Grid 把这件事变成声明：先定义轨道，再放置项目。

本文给出三条最常用的 Grid 写法。范围见表 1-1。

项	本文覆盖	本文不覆盖
轨道	grid-template-columns、grid-template-rows、fr、minmax、repeat	子网格（C01）
定位	行列线编号、span、grid-template-areas	自动放置算法细节
对齐	gap、place-items、place-content	逻辑方向布局（C01）

2 预备知识

项	要求	核对方式
环境	本地服务器可用	浏览器能打开 localhost
文件	css-practice/grid.html	编码 UTF-8
浏览器	Chrome 130+，Layout 面板可用	能看到网格线
前置	A06	理解主轴与交叉轴

3 原理与实现

3.1 先定义轨道，再放置项目

Grid 的执行顺序固定：定义行列 → 项目按顺序或指定位置落入，如图 3-1 所示。

flowchart LR
    A["定义列轨道<br/>grid-template-columns"] --> C["形成网格"]
    B["定义行轨道<br/>grid-template-rows"] --> C
    C --> D["项目自动放置"]
    C --> E["指定行列线或区域"]
    D --> F["gap 与对齐生效"]
    E --> F

图 3-1 Grid 的定义与放置顺序

图上可见：fr 只分配剩余空间，不是百分比；内容超出时轨道会被撑开，需要配合 minmax(0, 1fr)。

3.2 三条常用写法

/* 运行环境：Chrome 130+；css-practice/grid.css */
.equal-three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.auto-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

.layout {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "aside  main"
    "footer footer";
  min-height: 100dvh;
  gap: 1rem;
}

.layout > header { grid-area: header; }
.layout > aside { grid-area: aside; }
.layout > main { grid-area: main; }
.layout > footer { grid-area: footer; }

轨道函数与定位方式见表 3-1。

写法	含义	注意点
1fr	剩余空间的等分份数	不是百分比
minmax(0, 1fr)	允许收缩到 0 的等分	防止长内容撑破
repeat(3, 1fr)	重复三次	数量变化改数字即可
repeat(auto-fit, minmax(16rem, 1fr))	按宽度自动决定列数	卡片网格首选
auto-fill	与 auto-fit 类似，但保留空轨道	需要占位对齐时使用
grid-column: span 2	跨两列	行方向同理用 grid-row
grid-template-areas	用名字描述布局	每个名字必须构成矩形

对齐属性见表 3-2。

属性	作用方向	常用值
place-items	单个项目在两轴上	center、start
place-content	整个网格在两轴上	space-between、center
justify-items	项目在列轴	stretch（默认）
align-items	项目在行轴	start、center

4 验证与讨论

1. 打开页面，确认三栏等宽、卡片网格随窗口宽度自动增减列数。
2. 在 Layout 面板打开网格覆盖，确认轨道数量与 repeat 值一致。
3. 把 minmax(16rem, 1fr) 改为 16rem，观察窄屏下出现横向滚动。
4. 把 grid-template-areas 中某一行改成不同数量的列名，观察布局失效。

检查项	预期结果	说明
等分	三栏宽度一致	minmax(0, 1fr)
自适应列数	宽屏四列、窄屏一列	auto-fit + minmax
区域布局	页头跨两列、页脚跨两列	grid-template-areas
无溢出	长内容不撑破轨道	用 minmax(0, 1fr)

讨论与局限。 auto-fit 在项目数少时会拉伸项目填满整行，auto-fill 则保留空轨道；两者视觉差异在项目数少时最明显。另 grid-template-areas 要求每行名字数量一致，错一个字符整块失效且不报错。

5 常见问题

现象	原因	处理
列宽被内容撑开	使用 1fr 而非 minmax(0, 1fr)	改 minmax(0, 1fr)
卡片网格在宽屏只排两列	minmax 下限过大	缩小下限或改用 auto-fill
区域布局整体失效	某行名字数量不一致	逐行核对名称数量
项目没有跨列	误用 grid-column: 2	跨列用 span 2
子项无法垂直居中	只设了 justify-items	补 align-items 或用 place-items

6 结论

序号	结论	依据
1	Grid 先定义轨道再放置项目	图 3-1
2	用 minmax(0, 1fr) 防止内容撑破	表 3-1
3	卡片网格用 auto-fit + minmax	表 3-1
4	区域命名布局必须保证每行名称数一致	表 3-1

• 上一篇：A06-Flex布局
• 下一篇：A08-响应式与媒体查询
• 返回：A00-总结 ｜ 科目 README

参考文献

[1] MDN Web Docs · Grid 布局基本概念，https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout（访问于 2026-10-31）
[2] CSS Grid Layout Module Level 2，W3C，https://www.w3.org/TR/css-grid-2/（访问于 2026-10-31）