grid-template-columns 无法用 transition 实现折叠动画，因 fr、minmax() 等值不可插值；应改用 width + min-width: 0 + overflow: hidden 控制侧边栏自身收放，保持 grid 结构稳定。
grid-template-columns 不能直接加 transition 实现折叠动画——这不是写法问题，是浏览器根本无法对 0fr、1fr 或 minmax() 做插值计算。
为什么 grid-template-columns 动画会静默失效
fr 单位表示“剩余空间的份额”，不是像素值，浏览器没有中间帧可算。即使写了 transition: grid-template-columns 0.3s，Chrome 和 Firefox 都会忽略它。auto、minmax()、grid-template-areas 同样不可动画。
- 写
grid-template-columns: 0fr 1fr→ 折叠时视觉消失，但无动画，且0fr在部分 Safari 版本中触发渲染异常 - 写
grid-template-columns: 0 1fr→ 侧边栏列轨道被移除，主内容区自动占满，grid-column定位可能错乱 - 用
display: none切换 → Grid 轨道塌缩，动画中断，且点击区域残留问题难排查
用 width + min-width: 0 + overflow: hidden 替代
把折叠逻辑从 Grid 容器下放至侧边栏自身：它始终占据一列，靠自身宽度变化收放，Grid 轨道结构保持稳定。
-
.nav-sidebar设width: 240px（展开）或width: 0（折叠） - 必须加
min-width: 0—— 否则内部 flex 子项或长文本会撑开容器，width: 0失效 - 必须加
overflow: hidden—— 否则内容溢出、滚动条残留、点击穿透仍存在 -
transition: width 0.25s ease-in-out立刻生效，不依赖 Grid 轨道变更
媒体查询里别动 grid-template-columns，只切类名
在 @media (max-width: 768px) 中重写 grid-template-columns: 1fr，会破坏动画连续性，还可能导致主内容区错位——因为 Grid 结构变了，子元素的 grid-column 可能失效。
- 正确做法：媒体查询中给
body加mobile-collapsed类，再用.mobile-collapsed .nav-sidebar控制width - 避免同时写
display: none—— 它会让 Grid 轨道塌缩，主内容区自动占满，动画中断 - 小屏默认折叠时，确保
.nav-sidebar的grid-column仍为1，否则布局可能跳变
高度锚定和滚动隔离必须同步处理
仅靠 Grid 布局无法让主内容区独立滚动。如果父容器高度没锚死，1fr 就失去计算依据；如果没限制主内容高度，整个 Grid 容器会一起滚动。
-
html, body { height: 100% }+.layout { min-height: 100vh }是前提 - 主内容区需设
overflow-y: auto和明确高度上限，如height: calc(100vh - 60px)（减去 header 高度） - 主内容区内部嵌套 Grid/Flex 时，常因
min-width: auto撑开父容器，此时要手动加min-height: 0
真正容易被忽略的是：折叠后侧边栏内图标文字的交互状态残留。比如 .nav-text 设了 transform: translateX(-100%)，但没配 pointer-events: none，用户仍可能误点到不可见文字上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
