如何用CSS Grid实现侧栏折叠后的主区自适应-css教程-PHP中文网

应动态切换 grid-template-columns：折叠时设为 1fr，彻底移除侧边栏列轨道；避免仅用 display: none 或 visibility: hidden，因 fr 不会重算；注意 grid-column 定位、高度基准和 gap 处理。

如何用css grid实现侧栏折叠后的主区自适应

侧边栏折叠后主内容区不撑满怎么办

写了 grid-template-columns: 240px 1fr，但折叠侧边栏（比如加了 display: none 或 width: 0）后，主内容区没自动占满全宽——这不是 Grid 的 bug，而是列轨道依然存在，只是被隐藏了。Grid 不会因为某列“不可见”就重算 1fr 分配逻辑。

真正有效的做法是动态切换网格列定义：

折叠时改用 grid-template-columns: 1fr，彻底移除那列轨道
不要只靠 visibility: hidden 或 opacity: 0，它们不改变轨道结构
如果用 JS 控制折叠，直接操作 style.gridTemplateColumns 比切 class 更快
若用 CSS 动画过渡宽度，grid-template-columns 无法动画，得用 transform: scaleX() 配合 overflow: hidden 模拟，但此时主区仍需手动切列定义

用 class 切换 grid-template-columns 的坑

很多人写两个 class：.layout-collapsed { grid-template-columns: 1fr; } 和 .layout-expanded { grid-template-columns: 240px 1fr; }，再用 JS 切换——这本身没问题，但容易忽略三处：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

折叠后主内容区若设置了 grid-column: 2，它会试图定位到“第二列”，而该列已不存在，导致错位或消失；应统一用 grid-column: 1 或删掉显式声明
父容器高度链路必须稳定：折叠/展开时 min-height: 100vh 不能丢，否则 1fr 在垂直方向失去基准
别在折叠态还保留 gap，否则 1fr 分配的是“容器宽减 gap”，视觉上留白；建议用 gap: var(--gap, 16px)，折叠时设 --gap: 0

折叠动画与 fr 单位的兼容性

fr 本身不支持 CSS 过渡，所以不能对 grid-template-columns 做 transition。想实现平滑折叠效果，得绕开列定义动画：

用 max-width + overflow: hidden 控制侧边栏伸缩，主区保持 grid-template-columns: 1fr 不变
或者用 transform: translateX() 把侧边栏移出视口，同时用 JS 同步更新 grid-template-columns，视觉上连贯，逻辑上干净
绝对不要给 Grid 容器设 overflow: hidden 来“裁剪”折叠中的侧边栏——这会截断内容，且干扰 1fr 计算
折叠过程中主内容区若有滚动条，记得同步控制 overflow-y：展开时主区可滚，折叠后全屏展示时通常关掉

移动端折叠侧边栏的额外注意点

小屏下侧边栏常以 drawer 形式从左滑入，此时 Grid 布局容易错位，关键在两处：

别依赖 grid-column 定位 drawer 元素——它应该脱离 Grid 流，用 position: fixed 或 absolute 叠在顶层，否则折叠/展开会触发 Grid 重排，引发抖动
主内容区在 drawer 展开时需加 margin-left: 240px 或 transform: translateX(240px) 避让，而不是指望 Grid 自动调整；Grid 列定义只用于“常态布局”，不负责交互态避让
如果用 @media (max-width: 768px) 直接切为单列，记得清掉所有 grid-column、grid-row 显式声明，避免残留规则干扰