CSS Grid vs Flexbox 实战指南：何时用哪个、常见布局模板与代码示例

CSS Grid 和 Flexbox 是 2026 年现代网页布局的两根支柱。它们经常被对立讨论——「我应该用 Grid 还是 Flex？」——但真正成熟的开发者知道，两者并不互斥而是互补：Grid 处理页面级二维布局，Flexbox 处理组件内部一维对齐。本文从一维 vs 二维的根本差异讲起，覆盖浏览器兼容、gap 属性、对齐快捷方式（justify-* / align-*）、最常用的 6 种布局模板（导航条、卡片网格、Holy Grail、Sidebar、表单、媒体对象）的完整代码示例，并给出 2026 年的最佳实践和决策树。读完你能对每个 UI 场景立刻判断：用 Grid、Flex，还是组合使用。

1. 一维 vs 二维：根本差异

Flexbox 是一维布局——它一次只关心一个轴。当你写 display: flex 时，子元素沿主轴（默认水平）排列，交叉轴对齐是次要决策。即使开启 flex-wrap: wrap，每一行内部仍是独立的一维流，行与行之间无法对齐到「列」上。

Grid 是二维布局——它同时控制行（row）和列（column）。grid-template-columns 和 grid-template-rows 显式定义网格，子元素可以跨越任意行列、对齐到任意网格线。这种二维能力让杂志式排版、Holy Grail 布局、复杂仪表盘成为简单的事。

实战判断：如果你的元素需要「沿一条线排列」——导航栏菜单、按钮组、tag 列表、标签导航——用 Flexbox。如果你的元素需要「在矩阵中放置」——页面整体框架、图片画廊、产品列表、仪表盘——用 Grid。

2. 浏览器支持与 2026 年现状

Flexbox：2017 年起所有主流浏览器（Chrome 29+、Firefox 28+、Safari 9+、Edge 11+）完全支持。IE10/11 有旧语法（display: -ms-flexbox），但 2026 年已无相关用户，可以无视。

Grid：2017 年起 Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+ 支持。2026 年 caniuse 显示 98%+ 全球可用。subgrid（子网格）从 2023 年起所有浏览器稳定支持，让嵌套 grid 也能继承父网格线。

结论：2026 年没有理由因为兼容性放弃 Grid。两者都是现代网页布局基石。

3. gap 属性的统一

过去 Flexbox 设置子元素间距需要 margin 技巧（margin-right + 最后一个 :last-child 重置），既繁琐又有边界 bug。2021 年所有主流浏览器把 gap（最初只在 Grid 中）移植到 Flexbox，让 display: flex; gap: 1rem 成为标准用法。

2026 年的最佳实践：永远用 gap 而不是 margin 模拟间距。它在 Grid 与 Flex 中行为一致：gap: 16px 设置统一间距，gap: 16px 24px 分别设置行与列间距。

配合 CSS Grid 生成器 可视化生成 grid-template-columns 与 gap 配置，省去手动计算时间。

4. 对齐快捷方式：justify-* vs align-*

对齐属性在 Flex 与 Grid 中略有差异，初学者经常混淆。统一记忆：

- justify-content：主轴方向对齐（Flex 默认水平、Grid 列方向）。值有 flex-start / center / flex-end / space-between / space-around / space-evenly。

- align-items：交叉轴方向对齐（Flex 默认垂直、Grid 行方向）。值有 stretch（默认）/ flex-start / center / flex-end / baseline。

- place-items: center 是 align-items + justify-items 的简写，居中一切的最快写法。

- justify-self / align-self：单个元素覆盖父级对齐设置。

2026 年若你想让一个元素「绝对居中」，最简代码是：父元素 display: grid; place-items: center;。一行搞定。Flex 也可：display: flex; justify-content: center; align-items: center;，多两行但同样直观。

5. 实战模板一：导航栏（Flex 经典）

典型导航：左 Logo + 中间链接 + 右侧用户头像。这是 Flex 的最佳场景。

代码：

nav { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1.5rem; }

nav .logo { margin-right: auto; }

关键技巧：用 margin-right: auto 把 logo 推到最左，其余元素自然往右排。这是 Flex 的经典「分散对齐」做法。也可以用 justify-content: space-between 但灵活性不如 margin: auto。

6. 实战模板二：卡片网格（Grid 经典）

响应式卡片网格——列数随容器宽度自动变化。这是 Grid 的最佳场景。

代码：

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

解释：repeat(auto-fit, minmax(280px, 1fr)) 让浏览器自动决定列数：每列至少 280px，最多平分容器空间。容器 600px 时显示 2 列、900px 时 3 列、1200px 时 4 列，无需任何媒体查询。auto-fit 与 auto-fill 的差别在最后一行不满时，auto-fit 会拉伸剩余列，auto-fill 保留空列位。

Flex 也能做卡片网格但需要硬编码 flex-basis，自适应能力远不如 Grid。

7. 实战模板三：Holy Grail（圣杯布局）

经典布局：页眉 + 左侧栏 + 主内容 + 右侧栏 + 页脚，左右侧栏固定宽度，主内容自适应。Flexbox 时代要嵌套两层 flex 容器，Grid 一行解决。

代码：

.layout { display: grid; grid-template-areas: "header header header" "sidebar main aside" "footer footer footer"; grid-template-columns: 240px 1fr 240px; grid-template-rows: auto 1fr auto; min-height: 100vh; gap: 1rem; }

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

响应式调整：在小屏改 grid-template-areas 与 columns 即可，无需重写 HTML。这是 Grid 在响应式上的核心优势。

8. 实战模板四：Sidebar 折叠 + 媒体对象 + 表单

Sidebar 折叠：父容器用 Grid 定义 grid-template-columns: auto 1fr，sidebar 第一列、main 第二列。折叠时 JS 切换 sidebar 的 width 即可，Grid 自动重排。

媒体对象（左图右文）：经典 Flex 场景。.media { display: flex; gap: 1rem; align-items: flex-start; } .media img { flex: 0 0 80px; } .media .body { flex: 1; }。flex: 0 0 80px 表示固定宽度 80px、不伸缩。

表单两栏：Grid。grid-template-columns: 1fr 2fr 让 label 占 1 份、input 占 2 份；gap: 1rem 控制间距。比传统 float / table 简洁数倍。

9. 决策树与选型建议

问题 1：你的元素是「沿一条线」还是「在矩阵中」？

- 一条线（导航、按钮组、标签） → Flex

- 矩阵（页面框架、卡片墙、表单） → Grid

问题 2：是否需要响应式自适应列数？

- 需要 → Grid + auto-fit + minmax

- 不需要 → 都行

问题 3：是否需要跨行 / 跨列？

- 是 → Grid（grid-row: span 2 / grid-column: span 3）

- 否 → Flex 也可

问题 4：是否容器只有 1-2 个孩子？

- 是 → Flex 更轻量

- 否 → 看场景

组合使用：现代网页通常 Grid 处理页面级布局（Holy Grail），Flex 处理每个区块的内部对齐（导航、卡片内的标题 + 按钮）。这种「外 Grid 内 Flex」是 2026 年最常见的模式。

配合 CSS Grid 生成器、阴影生成器、圆角生成器 可以快速搭建组件原型。