CSS Grid性能优势源于grid-template系列属性在样式计算阶段即确定完整网格结构，跳过运行时反复测量与重排；其显式声明特性使列数、区域、轨道尺寸可控稳定，避免Flexbox因内容驱动导致的错行、高度塌陷及vh失真问题。
因为 grid-template 系列属性（grid-template-columns、grid-template-rows、grid-template-areas）让浏览器能在样式计算阶段就确定完整网格结构，跳过运行时反复测量和重排，这是性能差异的根源。
grid-template-columns 为什么比 flex-wrap 更稳
Flexbox 的 flex-wrap: wrap 是“内容驱动”的：每个子项真实宽度受字体渲染、padding、border、box-sizing 影响，导致同一组卡片在 iPhone SE（375px）和 iPhone 14 Pro（430px）上可能分别显示 1 列或 2 列，甚至第二行第一项被挤到第三行。
-
grid-template-columns: repeat(2, 1fr)明确锁定两列，不看内容、不依赖测量 - 加
gap: 12px自动处理间距，不用手算calc(50% - 6px)——Safari 对小数像素处理不稳定，偶发错位 - 别混用
fr和固定值（如1fr 200px），窄屏下易触发横向滚动
grid-template-areas 为何提升渲染可预测性
它把布局意图直接声明在容器上，浏览器据此构建坐标系，无需遍历子元素推导位置。而 Flexbox 的 order + display: none + 多层 wrapper 会迫使浏览器反复重排 DOM 流。
- 桌面端
grid-template-areas: "header sidebar main aside footer"，平板改一行：grid-template-areas: "header" "main" "footer"，语义清晰、切换零成本 - Grid 支持
grid-auto-rows: minmax(100px, auto)防止单张卡片内容少时高度塌陷；Flexbox 没有等效机制，只能靠 JS 或额外 wrapper 补位 - 区域名拼写错误时自动 fallback 到网格流，不会错位到不可见区域；浮动或绝对定位出错则直接消失
为什么 grid-template-rows 比 height: 100vh 更可靠
移动端键盘弹出时，vh 在 Safari 中严重失真（比如从 100vh 变成 60vh），导致 Flexbox 的 align-items: center 失效、内容被顶出视口。
立即学习“前端免费学习笔记（深入）”；
-
grid-template-rows: 1fr把可用空间锁定为一行轨道，不受vh动态变化干扰 -
place-items: center依赖容器有可分配空间，而 Grid 容器自身就能提供该空间，不依赖祖先元素高度链 - 若只是单个图标+文字居中，Flexbox 渲染路径更短，没必要强切 Grid——性能优势只在复杂场景显现
真正影响性能的不是“用了 Grid”，而是是否显式约束了轨道尺寸。没设 grid-auto-rows 或滥用 auto 值，照样触发强制同步布局；grid-template 的价值，只在你把它写实、写死、写明确的时候才兑现。
