Grid嵌套超2层会显著卡顿，应避免三层以上嵌套；优先用display: contents、单层grid、auto-fit、grid-area及Flex替代非必要Grid场景。
Grid布局嵌套超过2层就会明显卡顿
浏览器渲染Grid时，每层嵌套都会触发额外的布局计算和重排。三层以上嵌套（比如 grid 里套 grid 再套 grid）会让 layout 阶段耗时翻倍，尤其在滚动或动画中容易掉帧。
- 用
display: contents替代无意义的包裹容器——它让父元素不参与盒模型，子元素直接“透”到上层Grid中 - 避免用Grid容器仅为了居中或留白；改用
justify-self/align-self或gap控制单个子项位置 - 动态内容区域（如列表、卡片流）优先用
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))+ 单层grid，别为每张卡片再包一层grid
grid-template-areas 大量重复定义拖慢解析速度
grid-template-areas 是字符串解析型语法，浏览器需逐字符匹配命名区域。5行以上、含10+区域名的定义，在旧版Chrome或Safari中会明显增加样式计算时间。
- 区域名别用长驼峰（如
"header-main-nav"），缩写为"hdr nav main"即可 - 相同结构复用多次？改用
grid-area显式分配，比重复写grid-template-areas更快 - 响应式切换布局时，别靠媒体查询反复重写整个
grid-template-areas；优先用grid-column/grid-row微调个别项
auto-fit 与 auto-fill 在列表渲染中性能差异显著
两者都用于响应式列数计算，但 auto-fit 会折叠空轨道，auto-fill 保留所有可能轨道——后者在元素少但容器宽时，可能生成几十个空 grid-track，拖慢渲染。
- 卡片/项目数不确定的场景，一律用
auto-fit：grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) - 需要固定列数占位（比如表单字段对齐），才考虑
auto-fill，但必须加max-width限制容器宽度，防止生成冗余轨道 - 配合
grid-auto-flow: dense时，auto-fit更安全——dense可能引发重排，而空轨道越少，重排范围越小
transform 动画无法绕过Grid重排的典型误判
很多人以为给Grid子项加 transform: translateX() 就能跳过布局，但只要父容器是 grid 且子项依赖 grid-column 或 grid-row 定位，动画中列宽/行高变化仍会触发整格重排。
立即学习“前端免费学习笔记（深入）”；
- 纯位移动画，把子项设为
position: absolute并脱离Grid流（注意手动控制z-index和尺寸） - 想保Grid结构又做动画？把可变部分抽成伪元素或
::before，主元素只负责定位，不动grid-column - 用
will-change: transform前先确认该元素是否真被频繁重绘；乱加反而增加内存开销
真正卡顿的根源往往不在Grid语法本身，而在用Grid解决本该由Flex或普通流处理的问题。比如纯横向排列、单轴对齐、动态增删项——这些场景Flex更轻量，强行套Grid只会多一层计算负担。
