Grid 布局重排开销不一定比 Flexbox 大，但触发条件更敏感；其二维定位需同步计算行列轨道依赖，而 Flexbox 仅单向遍历主轴，尤其在动态插入项目或使用 minmax() 等函数时易引发多次测量。
Grid 布局的重排开销比 Flexbox 大吗？
不一定更大，但触发条件更敏感。Grid 的二维定位逻辑需要浏览器在布局阶段同时计算行轨道和列轨道的依赖关系，而 Flexbox 只需单向遍历主轴。这意味着：当 grid-template-columns 或 grid-template-rows 中包含 minmax()、fit-content() 或嵌套 auto 时，浏览器可能需要多次测量内容尺寸才能收敛，尤其在动态插入项目或频繁修改 grid-column 的场景下。
- 避免在动画帧中修改
grid-template-areas或grid-template-columns—— 这会强制同步重排（layout thrashing） - 用
fr单位替代auto+min-content组合，能显著减少测量次数；例如1fr 2fr比minmax(min-content, 1fr) minmax(min-content, 2fr)更轻量 - 如果只是做一维流式排列（比如卡片列表），别硬套 Grid ——
display: flex; flex-wrap: wrap在多数情况下渲染更快、内存占用更低
哪些 CSS 属性会让 Grid 容器进入“隐式网格”模式？
当子元素被显式定位到未定义的行或列（比如 grid-row: 5，但只定义了 3 行），浏览器会自动生成“隐式轨道”，这会带来不可控的布局膨胀和性能抖动。
- 显式声明足够多的轨道：用
grid-template-rows: repeat(10, minmax(0, 1fr))预留空间，比放任隐式增长更可控 - 禁用隐式增长：设置
grid-auto-rows: 0px和grid-auto-columns: 0px，再配合overflow: hidden，可防止意外溢出（适合固定容器高度的仪表盘场景） -
grid-auto-flow: dense虽能填空，但会打乱 DOM 顺序，影响可访问性和打印样式，慎用
响应式 Grid 中 auto-fill 和 auto-fit 的实际差异
二者都用于配合 repeat() 实现列数自适应，但行为关键不同：auto-fill 会保留所有空轨道（哪怕没放项目），auto-fit 则会把空轨道收缩为 0。
- 想让空白区域“占位留白”（如画廊网格中预留上传入口），用
auto-fill - 想让列宽随容器等比拉伸（如导航菜单自动均分），必须用
auto-fit，否则空列会把其他列挤窄 - 注意：两者都不解决“最小列宽被压缩过小”的问题，得配
minmax(250px, 1fr)才真正可靠
IE11 兼容 Grid 的真实成本
IE11 只支持旧版语法（-ms-grid- 前缀），且不支持 fr、grid-gap、grid-area 等核心特性，强行兼容会导致样式严重降级或需双写逻辑。
立即学习“前端免费学习笔记（深入）”；
- 不要试图用 Autoprefixer 自动补全 IE11 Grid —— 它无法转换语义（比如
grid-template-areas在 IE11 中完全无效） - 若必须支持 IE11，建议用
@supports not (display: grid)降级到 Flexbox，而不是维护两套 Grid 写法 - 测试时重点看
grid-column-start和grid-row-end是否被忽略 —— IE11 对这些属性的支持极不稳定，容易错位
Grid 的强大来自它对二维关系的显式表达，但这也意味着每一条 grid- 规则都在增加浏览器的约束求解负担。真正难的不是写出来，而是判断什么时候该收手、退回 Flex 或甚至普通块流 —— 尤其是当设计稿里那个“完美对齐”背后，藏着三处 minmax(auto, 1fr) 嵌套的时候。
