Как создать адаптивный макет сетки без пробелов с помощью Flexbox? [дубликат] ⇐ CSS

[Anonymous]

Я пытаюсь создать адаптивный макет сетки с помощью Flexbox, но столкнулся с проблемой, связанной с появлением промежутков между блоками в разных строках, в зависимости от их высоты. Желаемый макет должен напоминать эту структуру (см. изображение здесь).
Я реализовал следующий CSS для своего контейнера и элементов Flexbox:
.two-flexbox-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
align-content: center;
}

.two-flexbox-item {
width: 100px;
margin: 10px;
border: 5px solid #89a896;
background-color: #234243;
}

.flexbox-item-1 { min-height: 100px; }
.flexbox-item-2 { min-height: 200px; }
.flexbox-item-3 { min-height: 300px; }
.flexbox-item-4 { min-height: 300px; }
.flexbox-item-5 { min-height: 200px; }
.flexbox-item-6 { min-height: 100px; }


Подробнее здесь: https://stackoverflow.com/questions/792 ... ng-flexbox