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 检查器可视化调试，比看文档快得多。