Как сделать не ровную сетку через flex box?

Question

Имеется 8 блоков, которые должны располагаться как на скрине:

У меня получилось вот так: Как это правильно сделать желательно через flex box если это возможно?

Answer 1

Гуглите masonry раскладку.

body {
  margin: 0;
  padding: 1rem;
}

.masonry-with-columns {
  columns: 6 200px;
  column-gap: 1rem;
}

.masonry-with-columns div {
  width: 150px;
  background: #EC985A;
  color: white;
  margin: 0 1rem 1rem 0;
  display: inline-block;
  width: 100%;
  text-align: center;
  font-family: system-ui;
  font-weight: 900;
  font-size: 2rem;
}

.masonry-with-columns div:nth-child(1) {
  height: 374px;
  line-height: 374px;
}

.masonry-with-columns div:nth-child(2) {
  height: 307px;
  line-height: 307px;
}

.masonry-with-columns div:nth-child(3) {
  height: 138px;
  line-height: 138px;
}

.masonry-with-columns div:nth-child(4) {
  height: 467px;
  line-height: 467px;
}

.masonry-with-columns div:nth-child(5) {
  height: 176px;
  line-height: 176px;
}

.masonry-with-columns div:nth-child(6) {
  height: 120px;
  line-height: 120px;
}

.masonry-with-columns div:nth-child(7) {
  height: 237px;
  line-height: 237px;
}

.masonry-with-columns div:nth-child(8) {
  height: 156px;
  line-height: 156px;
}

.masonry-with-columns div:nth-child(9) {
  height: 469px;
  line-height: 469px;
}

.masonry-with-columns div:nth-child(10) {
  height: 257px;
  line-height: 257px;
}

.masonry-with-columns div:nth-child(11) {
  height: 479px;
  line-height: 479px;
}

.masonry-with-columns div:nth-child(12) {
  height: 491px;
  line-height: 491px;
}

.masonry-with-columns div:nth-child(13) {
  height: 118px;
  line-height: 118px;
}

.masonry-with-columns div:nth-child(14) {
  height: 176px;
  line-height: 176px;
}

.masonry-with-columns div:nth-child(15) {
  height: 398px;
  line-height: 398px;
}

<div class="masonry-with-columns">
  <div>
    1
  </div>
  <div>
    2
  </div>
  <div>
    3
  </div>
  <div>
    4
  </div>
  <div>
    5
  </div>
  <div>
    6
  </div>
  <div>
    7
  </div>
  <div>
    8
  </div>
  <div>
    9
  </div>
  <div>
    10
  </div>
  <div>
    11
  </div>
  <div>
    12
  </div>
  <div>
    13
  </div>
  <div>
    14
  </div>
  <div>
    15
  </div>
</div>

БЛОГ НА HUSL

Как сделать не ровную сетку через flex box?

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