CSS：在 onclick 事件刪除一些之后重新定位剩余的網格元素

Question

我是 CSS 網格布局的業余愛好者。 我想要做的是使用onclick()事件刪除網格中的一些元素，並使剩余的元素重新定位並獲得已刪除元素的形狀，如下所示：

我的代碼從網格中刪除了“A”，但無法更改“B”和“C”的形狀。 有沒有辦法用css來實現這一點？ Js 也可以，如果 css 還不夠

HTML

<div class="container">

  <div class="grid a">Grid A</div>
  <div class="grid b">Grid B</div>
  <div class="grid c">Grid C</div>

  <div class="grid a">Grid A</div>
  <div class="grid b">Grid B</div>
  <div class="grid c">Grid C</div>

  <div class="grid a">Grid A</div>
  <div class="grid b">Grid B</div>
  <div class="grid c">Grid C</div>

</div>

<div class="button" onclick="hide()">Hide Grid A</div>

JS

function hide() {
  var element = document.getElementsByClassName("a");
  var i;
  for (i=0; i<element.length; i++) {
    if (element[i].style.display) {
      element[i].style.display = null;
    }
    else {element[i].style.display = "none";
    }
  }
}

CSS

.container {
  width: 500px;
  margin: auto;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  counter-reset: div;
}
.grid {
  border: solid;
}
.grid:nth-child(6n + 1), .grid:nth-child(6n + 4) {
  grid-column: auto /span 2;
  grid-row: auto /span 2;
}

Answer 1

您已經從視圖中隱藏了元素，但這不會改變網格的處理和設置方式。

您需要從 DOM 中實際刪除元素。

查看https://replit.com/@cmorrreplit/TestingGridChange以獲得一個工作示例。