css grid 不是替代 flexbox，而是回归二维布局本职；它通过 grid-template-areas 和 repeat(auto-fit, minmax()) 等特性，天然支持行列对齐、跨格、响应式重排与等高，而 flexbox 更适合一维细节布局。
复杂表格布局不是“替代”，而是“归位” CSS Grid 不是用来“替代” Flexbox 实现表格布局的，而是它本就该干这事。所谓“表格布局”，指的是一组内容需严格按行列对齐、跨格、区域语义固定、断点间结构重排——这正是二维问题。Flexbox 在这种场景下强行上场，本质是拿螺丝刀凿墙：能动，但震手、费劲、还容易崩边。
真正该问的不是“怎么替代”，而是：“为什么之前用了 Flexbox？”常见原因包括：误以为 flex-wrap + width 就是网格、沿用旧项目习惯、或没意识到 grid-template-areas 和 minmax() 能直接消解过去靠 JS 或嵌套 wrapper 才能解的问题。
用 grid-template-areas 定义语义区块，比写 media query 更快
当你要在桌面端显示「侧栏+主内容+底部操作栏」，移动端变成「顶部导航→主内容→侧栏→底部操作栏」，用 Flexbox 得写两套 order、加 wrapper、再设 flex-direction: column，且 DOM 顺序和视觉顺序极易错乱。
Grid 只需两行 CSS：
.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
<p>@media (max-width: 768px) {
.layout {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
}</p>
-
grid-template-areas的字符串写法，让布局结构一眼可读，改顺序就是改文字，不碰 HTML - 每个区域名（如
"sidebar"）可被任意子元素用grid-area: sidebar指定，无需考虑 DOM 位置 - 区域名支持跨行跨列，比如
"header header" "main main" "footer footer"表示 header 占满首行 - 注意：区域名必须用引号包裹，且每行单词数必须一致，否则声明无效
repeat(auto-fit, minmax()) 比 flex-wrap 更可靠地处理卡片流
Flexbox 做响应式卡片网格时，常写 flex: 0 0 calc(33.333% - 1rem)，结果因 border、padding 或四舍五入误差导致最后一行只有一张卡还换行。
Grid 一行解决：
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
-
auto-fit会收缩空轨道，把剩余空间分给有内容的列；auto-fill则保留空轨道，适合占位场景 -
minmax(280px, 1fr)表示“最小 280px，最大均分剩余空间”，小屏下自动退为单列，无需 media query - 子项不用设
width、margin或nth-child清除浮动，gap统一控制间距 - 兼容性无顾虑：Chrome 66+、Firefox 61+、Safari 16.4+、Edge 79+ 全支持该语法（截至 2026 年中）
跨行跨列、等高、错行？Grid 天然支持，Flexbox 需 hack 遇到「某个卡片要横跨两行+占半列」「所有卡片高度必须一致」「某张图加载慢导致其他卡片错位」——这些是 Flexbox 的经典翻车现场。
Grid 对应写法极简：
.card-highlight {
grid-column: 2 / span 1; /* 从第2条线开始，占1列 */
grid-row: 1 / span 2; /* 从第1条线开始，占2行 */
}
<p>.card {
align-self: stretch; /<em> 确保等高，无需 wrapper 或 JS </em>/
}</p>
- Flexbox 中实现跨行，得额外包一层
flex-direction: column的 wrapper，DOM 层级膨胀 - Flexbox 的
align-items: stretch在某些嵌套条件下失效；Grid 的align-self: stretch对单个子项生效，稳定可控 - Flexbox 的
flex-wrap换行逻辑依赖子项高度，一张高图会让整行错位；Grid 的轨道由容器定义，子项高度不影响列宽和换行位置 - 别滥用
calc()写grid-template-columns，比如calc(100vw - 240px) 240px，viewport 变化时频繁重解析，拖慢渲染
真正难的不是写 Grid，而是判断什么时候不该用它——比如按钮组内左右撑开、卡片内标题与按钮垂直对齐、表单 label 和 input 并排，这些都是一维问题，Flexbox 更轻、更直觉、更少意外。Grid 定骨架，Flexbox 管细节，这个边界一旦模糊，代码就会开始散发出“为了用而用”的气味。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
