折叠侧边栏时设 grid-template-columns: 0fr 1fr 是可靠方案，需配合 min-width: 0 和 overflow: hidden；0fr 合法且符合 grid 逻辑，而 0px 易触发约束或溢出。
折叠侧边栏时 grid-template-columns 宽度设为 0 会失效？
直接设 grid-template-columns: 0fr 1fr 或 0px 看似合理，但浏览器会忽略 0fr（fr 单位不支持 0），而 0px 又可能触发 minmax() 隐式约束或导致子元素溢出。真正可靠的方案是用 grid-template-columns: 0fr 1fr 配合 overflow: hidden 和显式 min-width: 0 控制内容裁剪。
-
0fr是合法语法，表示“不分配剩余空间”，比0px更符合 Grid 布局逻辑 - 必须给侧边栏容器加
min-width: 0，否则内部文本或 flex 子项可能撑开宽度 - 折叠后建议加
overflow: hidden，避免滚动条残留或内容外露 - 不要依赖
display: none切换——它会破坏 Grid 的 track 定义，动画也不可用
用 CSS 变量 + transition 实现平滑折叠动画
Grid 的 grid-template-columns 默认不支持过渡动画，但可以通过 CSS 变量 + transition 绕过限制。关键在于把列宽抽成变量，再让变量参与计算。
- 定义变量：
--sidebar-width: 240px，初始grid-template-columns: var(--sidebar-width) 1fr - 折叠时改变量值：
--sidebar-width: 0fr（注意单位要一致，不能混用 px 和 fr） - 加过渡：
transition: --sidebar-width 0.3s ease-in-out（Chrome 110+、Firefox 115+ 支持变量过渡） - 旧版浏览器 fallback：用
@supports not (transition: --sidebar-width 0.1s)降级为 JS 控制 class 切换
折叠后主内容区没自动占满？检查 grid-area 和隐式轨道
常见现象：侧边栏折叠了，但主内容区仍留着空隙。问题往往不在列定义，而在子元素的 grid-column 或 grid-area 设置太死。
- 避免写死
grid-column: 2 / -1—— 折叠后第 2 列没了，该区域会变成空轨道 - 推荐用
grid-column: 1 / -1（从第一列到末尾），或直接依赖源顺序（不设grid-column） - 如果用了
grid-area，确保命名区域在折叠前后都存在，或改用grid-column-start/end动态控制 - 检查是否误启用了
grid-auto-flow: column，这会让 Grid 按列优先排列，干扰折叠逻辑
移动端适配时 collapse 状态要不要用 media query 重置？
不需要单独 media query 来“重置”折叠状态。折叠行为应由交互触发（如按钮点击），而非断点强制。但需注意断点下默认布局策略。
立即学习“前端免费学习笔记（深入）”；
- 小屏默认折叠：在
@media (max-width: 768px)里设--sidebar-width: 0fr，同时保持 toggle 按钮可见 - 避免在媒体查询里覆盖
transition，否则动画可能中断；统一用 JS 控制变量更可控 - 触摸设备要考虑
prefers-reduced-motion，用@media (prefers-reduced-motion: reduce)关掉过渡 - 真机测试重点：iOS Safari 对
0fr的解析偶尔有延迟，加will-change: grid-template-columns可缓解
最易被忽略的是子元素的 min-width 和 white-space —— 它们会在折叠后悄悄把侧边栏顶宽，让 0fr 失效。每次调试先查 computed styles 里的实际 width 和 min-width。
