Как убрать пустое место в grid?

Question

[Евгений]

У меня есть следующая структура html:

<div class="items">
      <div class="item item-1">1</div>
      <div class="item item-2">2</div>
      <div class="item item-3">3</div>
      <div class="item item-4">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
    </div>

Стили:

.items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  grid-auto-flow: row;
}

.item {
  background: red;
  padding: 10px;
  height: fit-content;
}

.item-3 {
  height: 200px;
}

Я задаю 3 элементу высоту в 200 пикселей, но при этом у блока 4 образуется пустое место заполняющее также 200px, как сделать так, чтобы у элементов с разной высотой не появлялось пустых мест у соседних блоков?
Ссылка на codesandbox:
https://codesandbox.io/s/relaxed-brattain-9r6l2p?f...

Comments

[Сергей delphinpro]

не открывается ваша песочница =(

[Евгений]

Сергей delphinpro, https://codepen.io/MadnessTony/pen/xxQGNBY

[Ankhena]

Как убрать пустое место в grid?

- Не использовать грид.
Если была бы известна высота остальных блоков, то гриды бы помог за счет объединения ячеек. А так нет.

css columns, скрипты типа masonry, просто подкрутить на js и т.д.

Answer 1

[imko]

Сделать маленькйи элемент такой же высоты

Comments

[Евгений]

Мне нужно убрать пустое место и поставить туда следующие элементы, а не заполнить его тем же элементом

[imko]

Евгений, ну вот другое дело, понятная формулировка запроса) тогда тебе нужно это

[Евгений]

imko, все равно пустое место не заполняется остальными элементами(

[imko]

Евгений, прочитал а оно не заработало? я как должен угадать что именно ты напиисал в коде?)

[Евгений]

imko, https://codesandbox.io/s/jovial-architecture-zk4cht
Применил для items grid-auto-flow: row;

[imko]

Евгений, ты точно разобрался как работает то что описано в документации? Не просто написал первое попавшееся?

[Евгений]

imko, да, я же скинул ссылку на песочницу

[imko]

Евгений, судя по песочнице как раз не разобрался)

[Алексей Гончаров]

imko, не удивительно что ваши решения не работают

[imko]

Алексей Гончаров, ну уж совсем то позориться не надо)

[Алексей Гончаров]

imko, так позор это отвечать неправильно, тем самым тратить время авторов)

[imko]

Алексей Гончаров, а сталкерить человека в других вопросах и ничего не понимая в разработке спамить ему гадости из-за обиды не позор, я правильно понимаю?

[Алексей Гончаров]

imko, вы же сталкерите в моих ответах. Плюс все таки верно сначало проверить и потом отвечать.

ничего не понимая в разработке

Говорит человек который не смог ответить на элементарный вопрос