<p>侧边栏收缩时grid-template-columns计算失效，须用CSS变量+calc()动态控制列宽，如grid-template-columns: calc(var(--sidebar-width) * 1px) 1fr，并配合overflow:hidden和min-width:0确保视觉与交互一致。</p>
侧边栏收缩时 grid-template-columns 计算失效？用 CSS 变量 + calc() 动态响应
直接结论：不能靠 grid-template-columns: 1fr 300px 硬写死，必须把宽度抽成 CSS 变量，再用 calc() 组合。否则 JS 切换类名后，浏览器不会重新计算 grid 轨道宽度。
常见错误是写成：.sidebar-collapsed { --sidebar-width: 0; }，但没在 grid-template-columns 里引用它——结果样式根本不变。
正确做法：
- 根元素或容器上定义初始变量：
:root { --sidebar-width: 260px; } - grid 容器用：
grid-template-columns: calc(var(--sidebar-width) * 1px) 1fr;（注意单位乘法补1px避免 calc 解析失败） - 收缩时只需改变量值：
.sidebar-collapsed { --sidebar-width: 0; }，无需重写整个grid-template-columns
JS 切换类名时，为什么 sidebar 元素没隐藏？检查 display 和 overflow
只加 sidebar-collapsed 类，不代表侧边栏“消失”——它还在 grid 轨道里占位，只是宽度变成 0。如果内容溢出或有边框/阴影，仍可能显示异常。
立即学习“前端免费学习笔记（深入）”；
典型表现：overflow: hidden 没生效、滚动条残留、鼠标还能点到不可见区域。
实操建议：
- 给侧边栏自身加
overflow: hidden和min-width: 0（防止 flex/grid 内部子项撑开） - 收缩时主动设
display: none？不行——会破坏 grid 布局结构，导致右侧主区自动占满整行。应保持display: block或默认值 - 若需彻底移除交互，可用
pointer-events: none配合opacity: 0（视觉隐藏），但不推荐替代宽度控制
移动端优先收缩：媒体查询与 JS 类名切换的优先级冲突怎么解？
当 CSS 媒体查询强制 --sidebar-width: 0（比如 @media (max-width: 768px)），而 JS 又手动加 sidebar-collapsed 类——两者变量值冲突，最终以层叠顺序为准，不是你预期的“JS 覆盖媒体查询”。
原因：CSS 变量继承和层叠规则中，普通选择器（如 .sidebar-collapsed）的权重低于媒体查询内的同级选择器（如 @media {... .container {...}}）。
解决办法：
- 统一交由 JS 控制变量，媒体查询只负责「触发 JS」：监听
resize，在小屏时自动加sidebar-collapsed类，而不是在 CSS 里改变量 - 或提升 JS 设置的变量优先级：用
!important在内联 style 上设置（不推荐）；更稳妥的是把所有响应逻辑收口到一个 class，例如.layout-mobile .sidebar-collapsed，确保 specificity 足够高 - 避免在 :root 上写媒体查询变量，改在具体容器上定义，让 JS 操作范围更精准
过渡动画卡顿？grid-template-columns 不支持 transition，得绕开
直接对 grid-template-columns 加 transition 是无效的——该属性不可动画化。你看到的“瞬间切换”，其实是浏览器跳过了过渡。
想实现平滑收缩，只能动“内容”而非“轨道”：
- 给侧边栏内部包裹一层
<div class="sidebar-inner">，对其设置 <code>width+transition: width 0.3s ease - 同时保持外部 grid 轨道宽度为固定值（如
260px），用overflow: hidden截断 - 或者用
transform: scaleX(0)+origin-left，性能更好，但要注意子元素 transform 影响布局流 - 绝对不要对
grid-column-end或grid-area做动画——同样不支持
真正要小心的是：CSS 变量本身可被 transition（通过 @property 注册），但目前兼容性差（Chrome 120+ 支持），生产环境别依赖。
