最近在做一个后台管理系统的前端重构，页面结构比较复杂，左中右三栏布局，顶部还有个固定导航。以前这种布局我都是用 flex 或者 float 搞定，这次想试试 CSS Grid，毕竟听说它更强大。但刚上线测试就发现，部分低配安卓机上滑动有点卡，这让我不禁怀疑：grid 布局真的会影响渲染性能吗？
Grid 并不是性能杀手
先说结论：正常使用下，CSS Grid 不会明显拖慢页面渲染。现代浏览器对它的支持已经很成熟，渲染引擎也做了专门优化。像 Chrome、Firefox、Edge 都能高效处理 grid 布局，甚至比一堆嵌套的 flex 更快。
真正出问题的，往往是使用方式。比如我一开始把整个页面都塞进一个 grid 容器里，还用了大量 fr 单位和 minmax() 函数，结果在一些老设备上计算布局的时间明显变长。
什么时候会卡？
如果你的 grid 容器里有上百个子元素，又设置了复杂的响应式规则，浏览器就得反复重算每一行每一列的尺寸。特别是在滚动或动画过程中触发重排，用户就能感觉到卡顿。这就像你让一个人同时算 100 道数学题，再快也会慢下来。
举个例子，有个数据看板页面用了 grid 实现卡片流式排列，每张卡片都有自己的 grid-column 和 grid-row 定位。当数据动态更新时，整个网格重新布局，手机端就出现了短暂白屏。
怎么写才不拖后腿
合理使用 grid 其实比传统布局更轻量。关键是要避免过度设计。比如简单的两栏布局，完全没必要上 grid：
<div class="container">
<div class="sidebar">侧边栏</div>
<div class="main-content">主内容</div>
</div>
对应的样式也不用太复杂：
.container {
display: grid;
grid-template-columns: 240px 1fr;
gap: 16px;
}
这种写法清晰，浏览器解析也快。但如果为了“炫技”非得加上 grid-template-areas、span 跨越多行多列，还配合媒体查询搞七八套布局，那性能下降就不奇怪了。
实际建议
遇到性能问题别急着甩锅给 grid。先打开浏览器的开发者工具，看看是不是重排（reflow）太频繁。有时候是 JavaScript 在疯狂修改 DOM，顺带把 grid 容器也触发了重绘。
如果确定是 grid 导致的，可以尝试拆分大网格。比如把页头、侧边栏、主体内容分成几个独立的 grid 区域，而不是全塞在一个父容器里。这样每次变化只影响局部，不会牵一发动全身。
另外，避免在动画中改变 grid 的结构属性，比如动态调整 grid-template-columns。这类操作代价高，更适合用 transform 或 opacity 来做视觉变化。