html - 如何填充css网格中剩余的空列

Question

我有一个 5 列的网格。在图片中，我已经演示了当第 1、2 和 5 列被“填充”时，我想在剩余的第 3 和 4 列中放置一个项目。

我永远不知道哪些列被“占用”，所以代码应该是灵活的（第一个空到最后一个空）。

标签： htmlcsscss-grid

Answer 1

使用 CSS使用:empty伪类来检查元素是否为空。

使用JSinnerHTML == ''来检查元素是否为空。

document.querySelectorAll('.grid div').forEach(e => {
  if (e.innerHTML == '') {
    console.log(e);
  }
})

.grid {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(5, 1fr);
}

.grid div {
  background: green;
}

.grid div:empty {
  background: Red;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div></div>
  <div></div>
  <div>5</div>
</div>