iOS Safari上Grid列表滚动卡顿根本原因不是display: grid慢，而是布局约束触发强制重排或层合成失效，典型诱因包括grid-template-areas滥用、width: 100vw+overflow: hidden导致scrollLeft失准、minmax固定下限引发横向溢出，以及缺失-webkit-overflow-scrolling: touch致使默认非合成滚动。
移动端H5中CSS Grid滚动卡顿，90%不是Grid本身的问题，而是布局约束触发了强制重排或层合成失效——尤其在iOS Safari上表现明显。
为什么iOS Safari上Grid列表滚动卡顿？
根本原因不是display: grid慢，而是某些写法让浏览器无法高效合成图层或反复重排。典型诱因包括：
-
grid-template-areas用于列表项：每个列表项重复定义字符串区域名，解析开销高，且无法复用布局缓存 - 父容器设
width: 100vw+overflow: hidden，但子项总宽度超限，导致scrollLeft计算失准、滚动“失效” - 列宽用
minmax(120px, 1fr)等固定下限，在横屏时阻止列数自动增加，内容被迫单列撑宽，触发横向溢出+重排 - 未加
-webkit-overflow-scrolling: touch，iOS Safari默认使用非合成滚动，滑动生涩
如何让Grid容器支持可靠双向拖拽滚动？
关键不是“怎么加滚动”，而是“怎么不拦住滚动”。重点是把宽度控制权从父容器下放到子项：
- 移除父容器的
width、max-width硬性声明（如width: 100vw），让它由子项自然撑开 - 父容器只设
overflow: auto和scroll-behavior: smooth，不干预尺寸 - 子项用媒体查询独立控制宽度：
@media (min-aspect-ratio: 1/1) { .item { width: calc(100vw / 7); } } - 确保子项
min-width: 0（不是width: 0），防止文本或内联元素强行撑宽
哪些Grid写法会放大重绘开销？
以下写法在动态列表或频繁DOM更新场景中极易引发性能问题：
立即学习“前端免费学习笔记（深入）”；
- 用
grid-column: span 2配合JS动态增删类——每次变更都触发整行重排 - 在
grid-template-columns中混用fr与px（如1fr 200px 1fr），浏览器需反复解算比例，小屏下易抖动 - 对Grid容器频繁调用
element.style.gridTemplateColumns = ...，绕过CSSOM优化，强制同步重排 - 未设
will-change: transform却在滚动中用transform: translateY()做虚拟滚动位移
polyfill环境下Grid性能怎么控？
若必须兼容旧Android WebView（如4.4）并使用css-grid-polyfill，要特别注意其异步布局机制：
- 避免在
touchmove里直接调用element.gridLayout.scheduleRelayout()，改用requestAnimationFrame节流 - 批量更新DOM后，再统一触发
relayout，不要每增一个子项就刷一次 - 禁用
img的load事件监听（polyfill会响应它），改用loading="lazy"+ 占位符 - 慎用
:hover伪类——polyfill需监听所有鼠标事件，移动端无意义还吃CPU
真正难调的从来不是“怎么写Grid”，而是“怎么不让浏览器为它多算一遍”。尤其是横竖屏切换、键盘弹起、动态加载等场景，任何一处min-width或grid-template-areas的滥用，都可能让60fps掉到20fps——而这种问题在Chrome DevTools里往往只显示为“Layout”，看不出具体哪一行CSS在作祟。
