CSS Grid点击移除单元格后剩余元素如何自动重排调整形态

问题根因 #

你原来的样式是用nth-child按子元素的全局序号设置跨列/跨行规则，当A类元素设为display:none后，剩余的B、C类元素序号会发生变化，导致错误命中跨度规则，同时无法自动填充空缺。

解决方案 #

直接给不同类的网格绑定自身固定的跨度规则，搭配极简JS切换隐藏类即可，Grid本身会自动完成剩余元素的重排填充，不需要额外逻辑。

完整修改后代码 #

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="toggleHide('a')">Hide/Show Grid A</div>
<div class="button" onclick="toggleHide('b')">Hide/Show Grid B</div>
<div class="button" onclick="toggleHide('c')">Hide/Show Grid C</div>

JS

function toggleHide(type) {
  document.querySelectorAll(`.${type}`).forEach(el => el.classList.toggle('hidden'))
}

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-auto-flow: row dense;
}
.grid {
  border: solid;
}
/* 直接给不同类定固定跨度，不受其他元素影响 */
.a {
  grid-column: span 2;
  grid-row: span 2;
}
.b, .c {
  grid-column: span 1;
  grid-row: span 1;
}
.hidden {
  display: none;
}

方案优势 #

• 代码极精简，JS逻辑通用，后续新增隐藏按钮无需额外写逻辑，只需要传对应网格类名即可
• 跨度规则和元素位置解绑，不会因为某类元素隐藏导致样式错乱
• 新增grid-auto-flow: row dense规则可以让Grid自动填补前面的空缺，排列更紧凑

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