跳到主要内容

Grid 布局完全指南

这篇原本较长的 Grid 完全指南已拆分为多个子页面，便于按主题阅读和维护。

阅读顺序​

#页面讲什么什么时候看
1Grid vs Flexbox 与高度拉伸两者的选型差异、默认 stretch 行为、高度三层模型元素被莫名拉高、不知道该用哪个
2Grid 基础概念容器/Item/线/轨道/区域、显式与隐式网格初学，或术语总是对不上号
3Grid 轨道尺寸与间距fr 计算、minmax、auto-fill vs auto-fit、gap列宽不对、布局横向溢出
4Grid 元素放置与区域网格线、span、命名区域、自动放置与 dense搭页面骨架、跨行跨列
5Grid 对齐、简写与 Subgriditems vs content、place-*、subgrid对齐写了不生效、卡片对不齐
6Grid 常见示例、坑点与调试7 个可复用布局、常见坑、Overlay 调试直接抄代码，或排查问题

核心速记​

  • Grid 是二维布局，适合页面骨架、卡片矩阵、仪表盘、跨行跨列和命名区域布局。
  • Flexbox 是一维布局，适合导航栏、按钮组、组件内部排列等单方向布局。
  • Grid 和 Flexbox 的子元素在交叉轴上默认都可能 stretch。
  • Flexbox 常看起来“不占满高度”，通常是因为容器本身没有明确高度，高度由内容撑开。
  • Grid 更容易看起来“高度占满”，是因为 Grid 行高常由该行最高内容决定，而其他 Grid Item 默认会在所在 Grid Area 内拉伸。
  • 单个 Grid Item 不想拉满高度，用 align-self: start。
  • 所有 Grid Item 都不想拉满高度，用容器上的 align-items: start。
  • 1fr 等价于 minmax(auto, 1fr)，会被长 URL / 代码块撑破；主内容列请写 minmax(0, 1fr)。
  • 网格线数量 = 轨道数 + 1，「横跨整行」用 grid-column: 1 / -1 最稳。
  • *-items 管「东西在格子里怎么放」，*-content 管「格子在容器里怎么放」。
  • 改变视觉顺序（区域、order、dense）不会改变 DOM 与键盘焦点顺序。

常用修复​

.grid {
  display: grid;
  align-items: start;
}

或只控制单个元素：

.item {
  align-self: start;
}

防止主内容列被长内容撑破：

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

.main {
  min-width: 0;
}

无需媒体查询的响应式卡片：

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