grid-template-columns动画需配合transition且侧边栏必须设min-width:0；仅改值不触发动画，未设min-width:0会导致主内容区不扩展。
grid-template-columns 动画必须配 transition 才生效
直接改 grid-template-columns 的值不会触发任何动画，哪怕你用了 CSS 变量或 JS 修改。浏览器只对可过渡的属性做插值计算，而 grid-template-columns 默认不可过渡——必须显式声明 transition: grid-template-columns 0.3s ease，且该声明要写在**同一元素上**（不能只写在类名切换后的规则里）。
常见错误是只给 .layout.collapsed 加 transition，而初始状态没写，导致首次展开无动画；或者把 transition 写在父容器或 body 上，完全不生效。
- 正确写法：
.layout { display: grid; grid-template-columns: 240px 1fr; transition: grid-template-columns 0.3s ease; } - 折叠态只需改列宽：
.layout.collapsed { grid-template-columns: 60px 1fr; } - 别用
calc()或minmax()包裹变量值，部分浏览器对它们的插值支持不稳定 - 移动端 Safari 对
grid-template-columns过渡支持较弱，建议加will-change: grid-template-columns提前提示渲染引擎
主内容区不扩展？检查是否漏了 min-width: 0
即使 grid-template-columns 动画正常，主内容区（1fr 列）也可能卡在旧宽度不动。根本原因是：Grid 轨道宽度变化后，子元素若自身有最小宽度约束（比如内含长文本、图标容器、flex 子项），会阻止它收缩/扩张到预期尺寸。
最常被忽略的是侧边栏自身没设 min-width: 0。Grid 项默认有 min-width: auto，会撑住内容最小宽度，导致 60px 列实际仍占 240px 空间，1fr 拿不到释放出来的宽度。
立即学习“前端免费学习笔记（深入）”；
- 必须给侧边栏加：
.sidebar { min-width: 0; overflow-x: hidden; } - 主内容区也建议加：
.content { min-width: 0; }，防止内部<pre class="brush:php;toolbar:false;"></pre>或表格撑破布局 - 如果侧边栏里有 flex 布局的导航项，确保它们也设了
min-width: 0，否则 flex 项会强制维持内容宽度
用 CSS 变量控制列宽比写死 class 更灵活
靠切换 class 控制展开/收起，在多状态（比如“全隐藏”“图标态”“完整态”）或需要 JS 动态计算宽度时会很快失控。CSS 变量配合 var(--sidebar-width) 是更干净的解法，尤其适合主题化或响应式断点联动。
注意变量必须在被使用的上下文中定义，且修改后要触发布局重算——不是所有变量修改都自动触发重排，只有当变量值被用于可布局属性（如 grid-template-columns）时才有效。
- 定义变量：
:root { --sidebar-width: 240px; } - 主容器使用：
.layout { grid-template-columns: var(--sidebar-width) 1fr; transition: grid-template-columns 0.3s ease; } - JS 修改：
document.documentElement.style.setProperty('--sidebar-width', '60px'); - 别在 media query 里覆盖变量值再用 JS 改——变量作用域和优先级容易混乱，建议 JS 只负责交互态，媒体查询只管设备断点
transform 移动侧边栏 ≠ 推挤主内容
用 transform: translateX(-100%) 把侧边栏“滑走”，看起来像收起了，但它的布局空间还在，1fr 列根本感知不到变化，主内容区不会扩展。这是推拉效果中最典型的假动作。
真正“推挤”意味着侧边栏占用的空间被实时释放，Grid 轨道宽度变化 → 主内容轨道获得更大份额 → 子元素重排。只有改变 grid-template-columns、width、flex-basis 这类影响盒模型尺寸的属性，才能触发这个过程。
- 绝对定位 + transform：视觉移走，但 DOM 仍在文档流中占位 → 主内容不扩展
- display: none：空间彻底释放，但无过渡动画 → 不满足“平滑”要求
- margin-left 负值：仅适用于 Flex 布局，Grid 中无效；且需手动计算 margin 值，不如直接控列宽清晰
- 最终结论：Grid 场景下，
grid-template-columns+transition+min-width: 0是唯一兼顾动画、布局响应与可维护性的路径
min-width: 0 这行样式，90% 的人会在调试半小时后才想起加。 
