如何在网格中动态更改列宽

Question

我正在使用 CSS 网格，并且我有 3 列，其总宽度为 100%。

还有一个按钮，点击它可以显示或隐藏第三列。

我希望一旦第三列被隐藏，第二列的宽度就会延伸到屏幕的末端，这意味着它也应该占据第三列留下的空间。

function myFunction() {
  var x = document.getElementById("right");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

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

.leftNav {
  background-color: red;
}

.center {
  background-color: yellow;
}

.rightNav {
  background-color: green;
}

<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="myFunction()">Click Me</button>

Answer 1

我相信这就是您正在寻找的。我已经评论了这些更改。

function toggleRightNav() {
  var rightNav = document.getElementById("right");
  var container = document.querySelector(".container");

  if (rightNav.style.display === "none") {
    rightNav.style.display = "block";
    container.style.gridTemplateColumns = "1fr 3fr 1fr"; // revert to original layout
  } else {
    rightNav.style.display = "none";
    container.style.gridTemplateColumns = "1fr 4fr"; // expand the center column
  }
}

.container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr; /* adjusted fraction to control the width */
}

.leftNav {
  background-color: red;
}

.center {
  background-color: yellow;
}

.rightNav {
  background-color: green;
}

<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>

Answer 2

不要隐藏按钮，而是在容器上切换一个类，然后使用 CSS 隐藏它，同时更改网格结构

function myFunction() {
  var x = document.querySelector(".container");
  x.classList.toggle('hide')
}

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

.leftNav {
  background-color: red;
}

.center {
  background-color: yellow;
}

.rightNav {
  background-color: green;
}



.container.hide .rightNav {
  display: none; /* hide the right nav */
}
.container.hide .center {
  grid-column: span 2; /* take 2 columns */
}

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

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