Как изменить расположение этих блоков?

Question

[Дмитрий]

<div class="wrapper masonry-container">
      <div class="subcategory-block"></div>
      <div class="subcategory-block"></div>
      <div class="subcategory-block"></div>
      <div class="subcategory-block"></div>
      <div class="subcategory-block"></div>
      <div class="subcategory-block"></div>
      <div class="subcategory-block"></div>
      <div class="subcategory-block"></div>
      <div class="subcategory-block"></div>
      <div class="subcategory-block"></div>
      <div class="subcategory-block"></div>
    </div>

Как я могу убрать пустое пространство под этими блоками, чтобы они шли друг под другом.

Comments

[Вадим]

1. для начала стоит указать как они выстраиваются в сетку - гриды или флексбоксы. (дополнить вопрос css кодом для этих блоков)
2. Погуглить как выравнивать элементы в соответствии с ответом на пункт 1. Например:
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...
3. Тем самым сэкономить время и себе и другим. (Погуглить ответ на свой вопрос прежде чем задать его - одно из правил сервиса)

[Ankhena]

Используйте CSS columns.
Либо скриптики типа Masonry

Флексами это не сделать без указания высоты родителю, а гридами без js.

Answer 1

[Станислав]

.wrapper {
  column-count: 3;
}