CSS网格布局：设置0fr轨道宽度动态隐藏列

你是否遇到过这样的情况？在CSS Grid布局中尝试隐藏一个侧边栏，明明设置了 grid-template-columns: 0fr 1fr，结果侧边栏内的内容仍然顽固地撑开，无法缩回。或者，隐藏成功了，但添加过渡动画后却失效，主内容区域也无法自动占满。

别着急，问题并不在于 0fr 本身——它是规范明确支持的，语义清晰，表示“这列不参与剩余空间分配”，比使用 0px 或 display: none 更加优雅。0px 在使用了 minmax() 或子元素有最小宽度限制时，无法有效控制；而 display: none 则更为粗暴，直接使网格项脱离布局流，后续通过媒体查询切换或添加平滑动画都会变得不可控。

所以，0fr 是正确且更优的解法。它保留了轨道结构，Grid系统“知道”这列还存在着，只是暂时不给它空间而已。这才是实现动态切换和动画的基础。但核心问题在于，仅靠它自己还不够。

三个必须添加的配套约束，缺一不可

为什么仅设置 grid-template-columns: 0fr 1fr 会失败？因为浏览器默认会尽可能显示内容。侧边栏中的文本、图片，甚至是一个Flex容器，都有它们默认的最小宽度。这个“最小宽度”会反向施压，将 0fr 的轨道硬生生撑开。

要解决这个问题，需要祭出三件套，并且地方要加对：

• 第一，min-width: 0 必须添加在侧边栏的网格项上，而不是父容器或子元素。 很多人加错层级，导致调试半天却发现是这行声明放错了位置，非常冤枉。它的作用是覆盖内容默认的最小宽度限制。
• 第二，overflow: hidden，同样添加在这个网格项上。 这是为了防止折叠后外露的内容或恼人的滚动条残留。
• 第三，检查侧边栏内部的子元素。 如果里面还有Flex容器或未设置固定宽度的子元素，它们也可能“死扛”。需要给它们补上 width: 0 或 flex: 0 0 auto，明确告知它们“没有空间了”。

为隐藏与显示添加流畅的动画效果

原生 grid-template-columns 属性不支持 transition，这算是个小小的遗憾。不过，可以用CSS变量来曲线救国。

• 定义一个变量，例如 --sidebar-width: 240px，然后列的写法变为 grid-template-columns: var(--sidebar-width) 1fr。
• 折叠状态时，将变量设为 0fr。注意变量的单位必须一致，不能出现 0fr 和 240px 混用的情况。
• 最后，给变量添加过渡：transition: --sidebar-width 0.3s ease-in-out。Chrome 110+ 和 Firefox 115+ 已经支持此特性。
• 考虑到兼容性，可以使用 @supports not (transition: --sidebar-width 0.1s) 包裹一个降级方案，例如通过class切换加上 transform: scaleX(0) 来实现。

主内容区为何不自动占满？问题可能出在定位上

折叠后，主内容区还赖在原来的位置不动，右侧出现一大块空白。这时候别怀疑列宽，问题几乎肯定出在子元素的定位上，太“刻板”了。

• 不要写死 grid-column: 2 / -1。 一旦侧边栏列折叠，第2列消失，这个定义会指向一个不存在的轨道。
• 更灵活的方法是使用 grid-column: 1 / -1， 表示从第一列开始直到最后一列。或者干脆不设置，让Grid按照源顺序自动填充，反而更省心。
• 如果使用了 grid-area，务必确保定义的区域在折叠前后都存在。否则，还是用 grid-column-start 和 grid-column-end 动态控制更可靠。
• 最后检查是否误开了 grid-auto-flow: column。这个属性会让Grid优先按列排列，会打乱正常的折叠逻辑。

总而言之，使用 0fr 是正确的方向，但配套的约束缺一不可。尤其是 min-width: 0，这个看似平凡的属性，往往是解决一切问题的关键。