html - 如何填充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>