CSS网格布局中动态隐藏列的方法_通过设置轨道宽度为0fr实现

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 必须加在侧边栏网格项上，而不是它的子元素或父容器；很多人加错层级，结果调半天发现只是少了一行声明。