Сделать divs разной высоты заполнить вертикальное пространство на новой строке

Я пытаюсь создать сетку, которая должна выглядеть примерно так.

как это будет выглядеть

но он отображает как

что это на самом деле выглядит

вот мой код HTML

<div style="display: flex; flex-wrap: wrap">
    <div class="item" style="height: 400px; background-color: #ddd"></div>
    <div class="item" style="height: 200px; background-color: #000"></div>
    <div class="item" style="height: 200px; background-color: #ececec"></div>
    <div class="item" style="height: 700px; background-color: #DC0F0F"></div>
    <div class="item" style="height: 400px; background-color: #B429A2"></div>
    <div class="item" style="height: 200px; background-color: #009EBA"></div>
    <div class="item" style="height: 200px; background-color: #694141"></div>
    <div class="item" style="height: 400px; background-color: #29B436"></div>
    <div class="item" style="height: 200px; background-color: #74B2BD"></div>
    <div class="item" style="height: 700px; background-color: #DCDA0F"></div>
</div>

Класс элемента имеет статическую ширину: 33%.

Я понимаю, что делать что-то подобное в JS вполне возможно. Но я ищу чистое решение CSS.

Спасибо

ОТВЕТЫ

Ответ 1

Лучше всего использовать Masonry, но если вы настаиваете на решении только CSS, вам следует использовать columns Вот Демо

.wrapper {
 -webkit-column-count: 3; /* Chrome, Safari, Opera */
 -moz-column-count: 3; /* Firefox */
  column-count: 3;
 -webkit-column-gap: 0; /* Chrome, Safari, Opera */
 -moz-column-gap: 0; /* Firefox */
  column-gap: 0;
  width: 100vw;
}

.wrapper div {
  display: inline-block;
  width: 100%;
  vertical-align: top;

}

<div class="wrapper">
    <div class="item" style="height: 400px; background-color: #ddd"></div>
    <div class="item" style="height: 200px; background-color: #000"></div>
    <div class="item" style="height: 200px; background-color: #ececec"></div>
    <div class="item" style="height: 700px; background-color: #DC0F0F"></div>
    <div class="item" style="height: 400px; background-color: #B429A2"></div>
    <div class="item" style="height: 200px; background-color: #009EBA"></div>
    <div class="item" style="height: 200px; background-color: #694141"></div>
    <div class="item" style="height: 400px; background-color: #29B436"></div>
    <div class="item" style="height: 200px; background-color: #74B2BD"></div>
    <div class="item" style="height: 700px; background-color: #DCDA0F"></div>
</div>

Ответ 2

Вам нужно добавить свойства flex-direction и align-content к вашему элементу обертки. и некоторая фиксированная высота.... Проверьте DEMO

CSS

.wrapper {
  height: 1400px;
  display: flex; 
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;
}

.item {
  width:33%;
}

HTML

<div class="wrapper">
    <div class="item" style="height: 300px; background-color: #ddd"></div>
    <div class="item" style="height: 200px; background-color: #000"></div>
    <div class="item" style="height: 200px; background-color: #ececec"></div>
    <div class="item" style="height: 700px; background-color: #DC0F0F"></div>
    <div class="item" style="height: 400px; background-color: #B429A2"></div>
    <div class="item" style="height: 200px; background-color: #009EBA"></div>
    <div class="item" style="height: 200px; background-color: #694141"></div>
    <div class="item" style="height: 400px; background-color: #29B436"></div>
    <div class="item" style="height: 200px; background-color: #74B2BD"></div>
    <div class="item" style="height: 700px; background-color: #DCDA0F"></div>
</div>

Ответ 3

Добавлены еще несколько свойств гибкости. Я добавил:

flex-direction: column;
align-content: flex-start;

может быть не совсем то, что вам нужно, но вы должны быть в состоянии настроить его на свои нужды

См. скрипт JS

Руководство по трюкам CSS в flex-box

Ответ 4

<div style="display: flex; width: 100%;">
  <div style="display: flex; flex-direction: column; width: 33%;">
    <div class="item" style="height: 400px; background-color: #ddd"></div>
    <div class="item" style="height: 700px; background-color: #DC0F0F"></div>
  </div>
  <div style="display: flex; flex-direction: column; width: 33%;">
    <div class="item" style="height: 200px; background-color: #000"></div>
    <div class="item" style="height: 400px; background-color: #B429A2"></div>
    <div class="item" style="height: 400px; background-color: #29B436"></div>
  </div>
  <div style="display: flex; flex-direction: column; width: 33%;">
    <div class="item" style="height: 200px; background-color: #ececec"></div>
    <div class="item" style="height: 200px; background-color: #009EBA"></div>
    <div class="item" style="height: 200px; background-color: #74B2BD"></div>
    <div class="item" style="height: 200px; background-color: #694141"></div>
    <div class="item" style="height: 700px; background-color: #DCDA0F"></div>
  </div>
</div>