Верстка карточек разного размера

Question

Стоит задача заверстать карточки. Все бы ничего, но оттого, что первая карточка больше остальных, не получается заверстать ее во флексе. Подскажите, каким образом верстать такие карточки на флексе?

Answer 1

Если принципиально нужно через flex, то следует задавать пропорции параметром flex-basis (хотя для сравнения стоило бы попробовать и grid)

.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.std-item {
  flex-basis: 33%;
}

.big-item {
  flex-basis: 66%;
}

.card {
  background-color: beige;
  margin: .5em;
  height: 5em;
}

  <div class="container">
    <div class="big-item">
      <div class="card">Item 1</div>
    </div>
    <div class="std-item">
      <div class="card">Item 2</div>
    </div>
    <div class="std-item">
      <div class="card">Item 3</div>
    </div>
    <div class="std-item">
      <div class="card">Item 4</div>
    </div>
    <div class="std-item">
      <div class="card">Item 5</div>
    </div>
  </div>

БЛОГ НА HUSL

Верстка карточек разного размера

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