Как сверстать два столбца, смещенными по вертикали

Question

Нужно сверстать секцию,в которой блоки располагаются вот таким образом.

Answer 1

column-count

body {
  font-family: Arial, sans-serif;
}

.masonry {
  column-count: 2;
  column-gap: 10px;
}

.masonry-item {
  background-color: #b0c4de;
  margin-bottom: 10px;
  break-inside: avoid;
}

.masonry-item img {
  width: 100%;
  display: block;
}

<div class="masonry">
  <div class="masonry-item"><img src="https://via.placeholder.com/200x150" alt=""></div>
  <div class="masonry-item"><img src="https://via.placeholder.com/200x300" alt=""></div>
  <div class="masonry-item"><img src="https://via.placeholder.com/200x100" alt=""></div>
  <div class="masonry-item"><img src="https://via.placeholder.com/200x200" alt=""></div>
  <div class="masonry-item"><img src="https://via.placeholder.com/200x250" alt=""></div>
  <div class="masonry-item"><img src="https://via.placeholder.com/200x350" alt=""></div>
</div>

БЛОГ НА HUSL

Как сверстать два столбца, смещенными по вертикали

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