0fr 是合法且更优的隐藏列方式，因其语义清晰、保留轨道结构、兼容动画和响应式切换；但需配套 min-width: 0、overflow: hidden 及子元素宽度约束才能真正生效。
直接设 grid-template-columns: 0fr 1fr 是合法且有效的隐藏列方式，但仅靠它还不够——浏览器不会报错，但内容常会撑开、动画不生效、主区域不自动占满，问题全出在配套约束缺失上。
为什么 0fr 比 0px 或 display: none 更合适
0fr 是 Grid 规范中明确支持的语法，表示“不参与剩余空间分配”，语义清晰；而 0px 在 minmax() 或子元素有最小宽度时会被忽略或触发意外拉伸。display: none 则会让该网格项完全脱离布局流，导致 Grid 的轨道定义失效（比如 grid-column: 2 / -1 会指向不存在的列），后续动画、响应式切换都不可控。
-
0fr保留了轨道结构，Grid 系统仍“知道”这列存在，只是不给空间 - 它天然兼容
transition（配合 CSS 变量）和媒体查询切换 - 避免了
visibility: hidden占位、opacity: 0不影响布局等副作用
必须加的三个配套样式：min-width、overflow、子元素约束
只写 grid-template-columns: 0fr 1fr，侧边栏大概率仍可见或留白——因为内部文本、Flex 子项、图片默认有最小宽度，会强行撑开轨道。真正起效要三者齐备：
- 给侧边栏容器本身加
min-width: 0（不是父容器，是该列对应的网格项） - 加
overflow: hidden，防止折叠后内容外露或滚动条残留 - 若侧边栏内有 Flex 容器或未设
width的子元素，需额外加width: 0或flex: 0 0 auto，否则它们会反向索取空间
如何让隐藏/显示带平滑过渡动画
原生 grid-template-columns 不支持 transition，但可以用 CSS 变量绕过限制：
- 定义变量：
--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+ 支持） - 降级方案：用
@supports not (transition: --sidebar-width 0.1s)包裹，fallback 到 class 切换 +transform: scaleX(0)
主内容区不自动占满？检查 grid-column 设置是否写死
折叠后主内容区还卡在原来位置、右侧留白，通常不是列宽问题，而是子元素定位太僵硬：
- 避免
grid-column: 2 / -1—— 折叠后第 2 列没了，这个区域变成空轨道 - 改用
grid-column: 1 / -1（从第一列到末尾），或干脆不设，依赖源顺序自动填入 - 如果用了
grid-area，确保命名区域在折叠前后都存在；否则改用grid-column-start/grid-column-end动态控制 - 检查是否误启
grid-auto-flow: column，它会让 Grid 按列优先排列，干扰折叠逻辑
最易被忽略的是：min-width: 0 必须加在侧边栏网格项上，而不是它的子元素或父容器；很多人加错层级，结果调半天发现只是少了一行声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
