本文介绍在 CSS Grid 布局中，通过 JavaScript 动态切换 grid-template-columns 实现列宽自适应：隐藏右侧栏时，中间列自动扩展占据剩余空间，恢复显示时还原三列布局。
本文介绍在 css grid 布局中，通过 javascript 动态切换 `grid-template-columns` 实现列宽自适应：隐藏右侧栏时，中间列自动扩展占据剩余空间，恢复显示时还原三列布局。
在使用 CSS Grid 构建响应式布局时，常需根据用户交互（如点击按钮）动态调整列宽分配。原方案仅控制元素显隐（display: none/block），但未更新网格结构，导致隐藏第三列后，第二列仍保持原有 auto 或固定比例宽度，无法自动填充空出的空间——这是因为 Grid 的列轨道由 grid-template-columns 决定，而非子元素的可见性。
✅ 正确做法是：同步修改容器的 grid-template-columns 值，使列定义与当前可见内容匹配。
以下是优化后的完整实现：
<div class="container"> <div class="leftNav">left nav</div> <div class="center">center</div> <div id="right" class="rightNav">right nav</div> </div> <button onclick="toggleRightNav()">Click Me</button>
.container {
display: grid;
grid-template-columns: 1fr 3fr 1fr; /* 初始三列：左/中/右 = 1:3:1 */
gap: 8px; /* 可选：增强可读性 */
height: 200px; /* 示例高度，便于观察 */
}
.leftNav {
background-color: #ff6b6b;
}
.center {
background-color: #4ecdc4;
}
.rightNav {
background-color: #45b7d1;
}function toggleRightNav() {
const rightNav = document.getElementById("right");
const container = document.querySelector(".container");
if (rightNav.style.display === "none") {
rightNav.style.display = "block";
container.style.gridTemplateColumns = "1fr 3fr 1fr"; // 恢复三列布局
} else {
rightNav.style.display = "none";
container.style.gridTemplateColumns = "1fr 4fr"; // 两列：左占1份，中占4份（100% - 左占比）
}
}? 关键说明：
立即学习“前端免费学习笔记（深入）”；
- 使用 1fr 4fr 而非 1fr 1fr 是为了保持视觉比例协调（原三列总份数为 5，隐藏一列后，将原 3fr + 1fr = 4fr 合并给中间列，左列仍为 1fr，实现无缝扩展）；
- 避免直接操作 style.width 或 flex，Grid 的响应式本质在于轨道定义，而非单个项的尺寸；
- 若需支持多次切换或更复杂状态，建议改用 CSS 类名控制（如 .layout-two-col / .layout-three-col），配合 classList.toggle() 提升可维护性；
- 注意：grid-template-columns 是内联样式级覆盖，若原 CSS 中该属性被 !important 声明，需在 JS 中同样处理，或优先使用类名方案。
通过这种声明式轨道重定义，你既能保持 Grid 的语义清晰性，又能实现平滑、高性能的动态列宽调整。
