CSS Grid 布局从入门到精通：12 个高频场景

CSS Grid 的核心只有一句话：父元素划轨道，子元素占格子。记住这句，再套用下面 12 个高频场景的现成代码，90% 的页面布局都能几分钟写完，不必再用嵌套 div 加负 margin 去凑位置。

先搞懂三个词：轨道、线、区域

结论：Grid 把布局从「子元素之间怎么摆」变成「父元素先划出格子，子元素再往格子里坐」，思维一换，写法就简单了。

• 轨道（track）：`grid-template-columns` / `grid-template-rows` 划出的一列或一行。`1fr` 表示「剩余空间里的一份」，是最常用的单位。
• 线（line）：轨道之间的分隔线，从 1 开始编号。`grid-column: 1 / 3` 就是「从第 1 条线占到第 3 条线」，即跨两列。
• 区域（area）：用 `grid-template-areas` 给格子起名字，子元素写 `grid-area: header` 直接落座，改布局只改那张「地图」。

选型建议：一维排列（导航条、标签组）用 Flex，二维同时管行和列（整页骨架、卡片墙）用 Grid，两者不冲突——Grid 容器里的子项照样可以是 Flex 容器。兼容性不用纠结，主流浏览器 2017 年就全面支持 Grid，可放心上生产。

场景 1-4：整页骨架，一次写对

1. 侧边栏 + 自适应主内容

.layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; }

固定列写死像素，主内容用 `1fr` 吃掉剩余宽度。

2. 圣杯三栏

.layout { display: grid; grid-template-columns: 200px minmax(0, 1fr) 200px; }

结论：所有 `fr` 列都建议写成 `minmax(0, 1fr)`。Grid 子项默认 `min-width: auto`，长表格、长 URL、`pre` 代码块会把轨道顶宽，横向滚动条就是这么来的；改成 `minmax(0, 1fr)` 或给子项加 `min-width: 0` 立刻解决，这是新手踩得最多的坑。

3. 响应式卡片墙（零媒体查询）

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

浏览器自动算能放几列，屏幕窄了自动换行，完全不用写 `@media`。注意 `auto-fill` 与 `auto-fit` 的区别：容器很宽、项目很少时，`auto-fill` 保留空轨道（卡片不被拉宽），`auto-fit` 折叠空轨道（卡片撑满整行）。不想让最后一行卡片被拉变形，就用 `auto-fill`。

4. 12 栅格系统

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.col-4 { grid-column: span 4; }

比当年浮动方案干净得多，`span 4` 直接表达「占 4 格」。

场景 5-8：对齐与定位，别再算 margin

5. 水平垂直居中

.center { display: grid; place-items: center; }

结论：`place-items: center` 是当前最省事的居中方案，两行搞定，且不需要知道子元素尺寸。

6. 单个子项跨行跨列

.feature { grid-column: span 2; grid-row: span 2; }

做图文混排、重点大图卡片时，让某一块占 2×2 个格子即可。

7. 命名区域搭页面

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 220px 1fr;
}
.header { grid-area: header; }
.main   { grid-area: main; }

改版式只动这几行字符串，子元素 CSS 一行都不用改。

8. 子项在格子内对齐

`justify-self`（横向）、`align-self`（纵向）、`place-self`（简写）作用于单个子项；`justify-items` / `align-items` 作用于全部子项。要单独摆某一张卡片，改前者即可。

场景 9-12：进阶与避坑

9. subgrid 对齐跨行内容。 卡片标题长短不一导致内部元素错位时，用 `grid-template-rows: subgrid` 让子元素继承父网格的行轨道。Chrome 117+、Safari 16+、Firefox 早已支持，可作渐进增强：不支持时自动退回普通布局。

10. 不等高卡片 / 伪瀑布流。 Grid 目前没有可上生产的原生 masonry（`grid-template-rows: masonry` 仍是实验特性）。实用做法是 `grid-auto-rows: 8px` 加按内容高度计算 `span`，或直接改用 CSS 多列 `column-count`。

11. 表单标签对齐。

.form { display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; }

标签列宽度自动取最长标签，输入框左边缘整齐对齐。

12. dense 回填空洞。

.gallery { grid-auto-flow: dense; }

配合不同 `span` 的项目，`dense` 会让后面的小项目回填前面留下的空格，照片墙更紧凑。代价是视觉顺序与 DOM 顺序不一致，涉及 tab 焦点顺序时要谨慎使用。

收尾：真正要背的就三条——二维布局用 Grid、`fr` 列一律写 `minmax(0, 1fr)`、卡片墙用 `repeat(auto-fit, minmax(260px, 1fr))`。其余 12 个场景当作模板抄改，遇到不熟悉的属性直接用浏览器开发者工具的 Grid 检查器可视化调试，比看文档快得多。