CSS Grid 布局完全指南：从 12 栅格到响应式仪表盘

Flexbox 和 Grid 都是强大的布局工具，但设计初心完全不同。

Flexbox（一维）：用于同一行（或列）内元素的对齐和分配。当你需要让若干项目沿一条轴线均匀分布、自动换行、或撑满容器时，用 Flexbox。典型场景：导航栏、工具栏、简单列表。

CSS Grid（二维）：同时控制行和列，非常适合复杂的整体布局。当页面由「顶部导航 + 侧边栏 + 主内容 + 底部 footer」这样多行多列的块状区域组成时，用 Grid。

快速判断法：问自己「我需要同时控制水平和竖直方向的对齐吗」？是 → Grid；只控制一个方向 → Flexbox。一个页面通常混用两者：外层页面框架用 Grid，内部卡片容器用 Flexbox。

Grid 容器最关键的两个属性。

.container {
  display: grid;
  grid-template-columns: 200px 1fr 300px;  /* 3 列：固定 200px、弹性占满、固定 300px */
  grid-template-rows: auto 1fr auto;       /* 3 行：自动 / 弹性 / 自动 */
  gap: 16px;                               /* 行列间距 */
}

这个定义创建了一个 3 列 3 行的网格。中间列用 1fr 占满剩余空间。fr 单位是 Grid 独有的「弹性比例」单位，1fr 代表一份可用空间。如果你写 1fr 2fr 1fr，中间列会占其他两列的两倍宽度。

minmax(min, max) 是 Grid 最强大的响应式工具，它定义列的最小和最大宽度。

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

这行代码的含义：尽可能多地创建 250px 到 1fr 宽度的列。容器宽 1000px 时能放 4 列（每列 250px）；宽 600px 时放 2 列；宽 200px 时放 1 列。自动响应，无需媒体查询！

auto-fit vs auto-fill：都表示「自动生成尽可能多的列」，区别很微妙。auto-fit 会「坍塌」空轨道（如果最后几列没有内容就隐藏），而 auto-fill 保留空轨道。99% 的场景用 auto-fit。

不想计算「这个元素放第几行第几列」？用 grid-template-areas 给不同区域命名。

.container {
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr 40px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

这个布局清晰得像画图。响应式时只需改 grid-template-areas，元素的 grid-area 值不变。例如移动端可以全部堆成一列。

Bootstrap 的 12 栅格系统（12 列划分）曾统治前端布局。现在该转向 CSS Grid 了。

12 栅格的局限：写 class="col-md-6 col-lg-4"，这是典型的「用 CSS 框架弥补语言能力不足」的设计。没有语义，依赖特定库。

CSS Grid 的优势：纯 CSS，不需要 HTML 类名，响应式用 minmax 搞定，维护灵活。但要注意：Grid 不是要完全替代栅格系统，而是说现代浏览器（2026 年已 99% 支持）不再需要 12 栅格库。

迁移建议：新项目直接用 Grid + minmax；老项目可逐步用 CSS Grid 重写核心布局，放弃栅格类名依赖。

Subgrid 是 CSS Grid 的 Level 2 新特性，让子元素继承父容器的网格定义。

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.child {
  display: grid;
  grid-template-columns: subgrid;  /* 继承父的 4 列 */
}

优势：不用重复定义列数，子元素自动对齐父元素的网格轨道。非常适合卡片网格中每张卡片的内部布局。浏览器支持率已达 85%+（Chrome 117+、Firefox 71+）。

把所有知识点组合起来，构建一个从 12 列 → 6 列 → 3 列 → 1 列的响应式仪表盘：

.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px;
}
.card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
}

加上媒体查询微调：@media (max-width: 768px) { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }。250px → 200px，在平板上会自动从 3 列变 2 列。

如果仪表盘需要「大卡占 2 列」的布局：.card.featured { grid-column: span 2; } 搞定。Grid 的灵活性远超旧时代的栅格库。