用grid-template-columns动态缩放列宽并配合transition实现平滑折叠，需确保高度链完整、子项保持stretch行为，避免侧边栏塌陷。
直接用 grid-template-columns 动态改宽度 + transition 就能实现折叠，但必须保证高度链完整、子项不破坏 stretch 行为，否则侧边栏会“塌”成内容高度。
折叠靠 grid-template-columns 变更，不是 display: none
用 display: none 会让侧边栏完全退出文档流，主内容区瞬间占满全宽，无法做平滑过渡。正确做法是让列宽从 250px 缩到 60px 或 0，再配 transition：
.layout { grid-template-columns: 250px 1fr; transition: grid-template-columns 0.3s ease; }-
.layout.collapsed { grid-template-columns: 60px 1fr; }（图标栏模式） -
.layout.hidden { grid-template-columns: 0 1fr; }（完全隐藏，需额外加.sidebar { display: none; }避免占位空白） - 不要写
grid-template-columns: 0 1fr却不隐藏元素——0列仍占轨道，可能留出不可见缝隙
高度拉不满？检查这三处高度链断点
侧边栏没撑满视口，90% 是因为高度链断裂，和 grid-template-columns 本身无关：
- 最外层容器（如
body或根.layout）缺min-height: 100vh - Grid 容器自身没继承高度，比如父级是
height: auto，它就得显式写min-height: 100% - 侧边栏元素设了
align-self: start，或父容器写了align-items: start，覆盖了默认的stretch - 如果侧边栏内部用了
position: absolute，得加min-height: 1px触发 BFC，否则stretch失效
移动端自动折叠要配 @media，别只靠 JS
纯 JS 控制折叠状态，在小屏下容易和用户手势冲突（比如误触、缩放后断点偏移）。推荐用媒体查询兜底：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) { .layout { grid-template-columns: 60px 1fr; } }- 断点单位统一用
px，别混用em或rem，避免浏览器解析差异 - 如果同时支持手动折叠，JS 切换类名时要确保不覆盖媒体查询的
grid-template-columns——把媒体查询写在常规样式之后，或用!important（仅限此场景） - 小屏下若想把侧边栏移到顶部，别用
order调整列顺序（列数已变），应改用grid-template-areas重定义布局
真正难调的不是折叠动画，而是当侧边栏内嵌滚动区域、有绝对定位图标、又叠加了 transform 动画时，stretch 行为会在某一层悄无声息地失效——这时候查 computed styles 比看代码更快。
