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

Question

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

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

Answer 1

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

使用JS 使用innerHTML == ''检查元素是否为空。

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>