как заполнить оставшиеся пустые столбцы в сетке CSS - PullRequest
Новая
       0

как заполнить оставшиеся пустые столбцы в сетке CSS

0 голосов
/ 12 октября 2019

У меня есть сетка с 5 столбцами. На рисунке я продемонстрировал, что когда столбцы 1, 2 и 5 «заполнены», я хочу поместить элемент в оставшиеся столбцы 3 и 4.

Я никогда не знаю, какие столбцы «заняты»поэтому код должен быть гибким (от первого пустого до последнего пустого).

enter image description here

1 Ответ

2 голосов
/ 12 октября 2019

Используя 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>
...