display: none会触发重排但仍是首选，因其引发的是可控、单次、无抖动的重排，元素彻底退出渲染流后grid自动重分配剩余项；而visibility: hidden等“假装隐藏”方式保留占位，易致动态内容加载后二次重排和视觉跳动。
为什么 display: none 会触发重排，但仍是首选
直接设 display: none 确实会让浏览器重新计算网格项列表，触发一次 layout，但这是「可控的、单次的、无视觉抖动」的重排——因为元素彻底退出渲染流，Grid 自动重分配剩余项，不会出现宽度突变、行高跳动或内容挤压。真正导致闪烁的是那些「假装隐藏」的操作：visibility: hidden、opacity: 0、transform: scale(0)，它们保留占位，JS 测量仍返回真实尺寸，动态内容加载后又撑开空间，造成二次重排+肉眼可见的“一跳”。
隐藏侧边栏时 grid-template-columns 必须同步调整
只对 .sidebar 加 display: none 不够。如果父容器还维持着 grid-template-columns: 250px 1fr，剩余的主内容区会被强制按“两列”轨道分配，可能被拉窄、留白，甚至因隐式行创建而撑高容器。必须在同一条媒体查询规则里同步改列定义：
- 小屏下退化为单列：
grid-template-columns: 1fr - 若用
grid-template-areas，则必须移除对应命名，例如从"sidebar main"改成"main" - 别写
grid-template-columns: 0 1fr—— 0 宽列仍参与轨道计算，可能引发渲染异常
滚动区域失效？检查主内容区是否被内部 Grid/Flex 撑爆
侧边栏隐藏后，主内容区（如 <main></main>）常出现滚动条不出现、内容直接溢出的问题。根本原因不是 Grid 本身，而是它内部嵌套了另一个 display: grid 或 display: flex，其子项默认 min-width: auto，把父容器宽度撑满，导致 overflow-y: auto 失效。
解决方法很简单：
- 给主内容区加
width: 100%或max-width: 100% - 对其内部第一个 Grid/Flex 容器加
min-width: 0 - 确保没意外继承了
white-space: nowrap或flex-shrink: 0
想加滑出动画？别碰 display，改用 transform + fixed
如果目标是“视觉隐藏+可唤出”，而非彻底移除，display: none 就不能过渡。此时必须放弃 Grid 对该元素的位置控制，转为物理移出视口：
- 侧边栏加
position: fixed、top: 0、bottom: 0、left: 0、width: 280px - 初始状态：用
transform: translateX(-100%) - 弹出状态：仅切一个 class，里面只写
transform: translateX(0) - Grid 容器本身加
overflow: hidden，防止横向滚动条漏出
这个方案完全绕过 Grid 轨道重算，动画由 GPU 加速，不触发 layout，也不会影响主内容区的滚动行为。真正容易被忽略的是：transform 和 grid-column 别共存，否则浏览器可能按两种逻辑分别计算尺寸，导致定位错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
