Как сделать без пустых дивов?

Question

сейчас выглядит довольно странно

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.block {
  width: calc(20% - 10px);
  height: 100px;
  background-color: #faf;
}

* {
  box-sizing: border-box;
}

<div class="row">
  
  <div class="block">content</div>
  <div class="block"></div>
    <div class="block"></div>
  <div class="block">content</div>
  <div class="block">content</div>
  
    <div class="block"></div>
  <div class="block">content</div>
  <div class="block">content</div>
    <div class="block"></div>
  <div class="block">content</div>
  
      <div class="block">content</div>
  <div class="block">content</div>
  <div class="block"></div>
    <div class="block">content</div>
  <div class="block"></div>
</div>

Answer 1

В css есть псевдокласс :empty. Просто используйте его!

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.block {
  width: calc(20% - 10px);
  height: 100px;
  background-color: #faf;
}

.block:empty {
  display: none;
}

* {
  box-sizing: border-box;
}

<div class="row">
  
  <div class="block">content</div>
  <div class="block"></div>
    <div class="block"></div>
  <div class="block">content</div>
  <div class="block">content</div>
  
    <div class="block"></div>
  <div class="block">content</div>
  <div class="block">content</div>
    <div class="block"></div>
  <div class="block">content</div>
  
      <div class="block">content</div>
  <div class="block">content</div>
  <div class="block"></div>
    <div class="block">content</div>
  <div class="block"></div>
</div>

Answer 2

Если нужно исключить отображение полностью пустых блоков, то используйте псевдокласс :empty :

* { box-sizing: border-box; }

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.block {
  width: calc(20% - 10px);
  height: 100px;
  background-color: #faf;
}
.block:empty { display: none; }

<div class="row">
  <div class="block">content</div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block">content</div>
  <div class="block">content</div>

  <div class="block"></div>
  <div class="block">content</div>
  <div class="block">content</div>
  <div class="block"></div>
  <div class="block">content</div>

  <div class="block">content</div>
  <div class="block">content</div>
  <div class="block"></div>
  <div class="block">content</div>
  <div class="block"></div>
</div>

Если же нужно блоки скрыть, не удаляя из разметки и не ломая поток, то можно использовать visibility: hidden вместо display: none :

* { box-sizing: border-box; }

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.block {
  width: calc(20% - 10px);
  height: 100px;
  background-color: #faf;
}
.block:empty { visibility: hidden; }

<div class="row">
  <div class="block">content</div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block">content</div>
  <div class="block">content</div>

  <div class="block"></div>
  <div class="block">content</div>
  <div class="block">content</div>
  <div class="block"></div>
  <div class="block">content</div>

  <div class="block">content</div>
  <div class="block">content</div>
  <div class="block"></div>
  <div class="block">content</div>
  <div class="block"></div>
</div>

В перспективе ожидается поддержка псевдокласса :blank, который считает пустыми даже те блоки, где только пробельные символы.

БЛОГ НА HUSL

Как сделать без пустых дивов?

Ответы (2 шт):