要实现 grid-template-columns 折叠动画，必须在 .layout 元素上显式声明 transition: grid-template-columns 0.3s ease，并为侧边栏及子项、主内容区设置 min-width: 0 防止内容撑宽；折叠宽度推荐设为 60px 而非 0px，必要时配合 display: none 彻底移出文档流。
直接改 grid-template-columns 的值不会触发动画，必须显式声明 transition 且写在同一个元素上；主内容区不扩展，大概率是侧边栏或其子项缺了 min-width: 0。
必须写对 transition 才能有折叠动画
浏览器默认不过渡 grid-template-columns，哪怕你用 JS 修改 CSS 变量或 class 切换列宽，没加 transition 就是硬切。
-
.layout元素上必须带transition: grid-template-columns 0.3s ease（不能只写在.layout.collapsed里） - 避免用
calc()或minmax()包裹列宽值，比如minmax(60px, 240px) 1fr，部分 Safari 版本插值异常 - 移动端 Safari 渲染较弱，建议加
will-change: grid-template-columns提前提示
主内容区不扩展？先查 min-width: 0
即使动画跑起来了，1fr 列也可能卡住不动——根本原因是 Grid 项默认有 min-width: auto，会撑住内部内容最小宽度，导致列轨道“名义上变窄”，实际空间没释放出来。
- 给侧边栏加
min-width: 0; overflow-x: hidden - 如果侧边栏里有 flex 导航项，它们也得加
min-width: 0 - 主内容区（
.content）同样建议加min-width: 0，防内部或表格撑破布局
折叠态用 0px 还是 60px？取决于交互需求
设成 0px 看似彻底隐藏，但容易引发布局抖动或焦点丢失；设成 60px 更稳妥，图标和可点击区域仍可用。
- 若真要完全移出流（比如小屏），必须配
display: none，光靠grid-template-columns: 0 1fr不行——DOM 节点还在网格中占位 - 手动折叠时，用 JS 切换 class 比操作内联样式更可控：
element.classList.toggle('collapsed') - 不要在媒体查询里只改
grid-template-columns就完事，小屏下记得同步控制.sidebar { display: none }
真正卡住的往往不是 1fr 写错了，而是某个嵌套的 flex 容器悄悄继承了 min-width: auto，或者一行未换行的长文本把整列撑死了——这些地方不报错，但动画就是不按预期走。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
