Как сверстать подобный блок без помощи гридов?

Question

Всем привет! Кто как думает, как сверстать такой блок? Только не хочется применять гриды, хотелось бы справиться флексами

Answer 1

Вот вам готовая разметка. Всё делается мгновенно быстро.

.wrapper,
.wrp {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  border: 2px solid gray;
}

.item,
.its {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
  padding: 5px;
  flex: 0 1 50%;
  border: 1px solid green;
}

.item img {
  width: 100%;
}

<div class="wrapper">
  <div class="item">
    <div class="wrp">
      <div class="its"><img src="https://picsum.photos/id/247/200/300"></div>
      <div class="its"><img src="https://picsum.photos/id/257/200/300"></div>
      <div class="its"><img src="https://picsum.photos/id/267/200/300"></div>
    </div>
  </div>
  <div class="item"><img src="https://picsum.photos/id/277/200/300"></div>
</div>
<div class="wrapper">
  <div class="item"><img src="https://picsum.photos/id/287/200/300"></div>
  <div class="item">Текст</div>
</div>

БЛОГ НА HUSL

Как сверстать подобный блок без помощи гридов?

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