如何在CSS Grid中动态调整列宽：隐藏列后让剩余列自适应

直接修改代码，通过切换容器类动态调整Grid布局，即可实现需求：

修改后的HTML #

<div id="grid-container" class="container">
  <div class="leftNav">left nav</div>
  <div class="center">center</div>
  <div id="right" class="rightNav">right nav</div>
</div>

<button onclick="myFunction()">Click Me</button>

修改后的CSS #

.container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  width: 100%;
}

/* 隐藏右侧列时的布局规则 */
.container.hide-right {
  grid-template-columns: 1fr 1fr;
}

.container.hide-right .rightNav {
  display: none;
}

.leftNav {
  background-color: red;
}

.center {
  background-color: yellow;
}

.rightNav {
  background-color: green;
}

修改后的JS #

function myFunction() {
  const container = document.getElementById("grid-container");
  container.classList.toggle("hide-right");
}

原理说明 #

原代码直接用display: none隐藏第三列元素时，Grid的轨道定义1fr auto 1fr并未改变，导致第二列仍保持auto宽度（仅适配自身内容），无法占满剩余空间。

通过给容器切换hide-right类，实现了两个关键变化：

1. 把Grid列模板从三列改成两列，让第二列（center）占据原本第二列+第三列的全部可用空间
2. 同时隐藏第三列元素，避免其占用布局位置

如果担心中间列内容溢出，可将hide-right的列模板改为1fr minmax(0, 1fr)。

内容的提问来源于stack exchange，提问作者Ortal Blumenfeld