Как сделать флекс элементы с разной высотой?

Question

Как сделать флекс элементы с разной высотой?

Рейтинг: 0Ответов: 1Опубликовано: 25.07.2023

как сверстать блоки так как показано на картинке?

css flexbox

Источник: Stack Overflow на русском

Answer 1

▲ 1

С помощью flex можно сделать так:

.container {
  width: 1040px;
  margin: 0 auto;
}

.gallery {
  display: flex;
  flex-flow: wrap column;
  height: 460px;
  gap: 50px;
  padding: 50px;
  background: #00B8C9;
}

.gallery__item {
  width: 280px;
  height: 120px;
  background: #DA5A60;
  border: 1px solid #000;
  box-sizing: border-box;
}

.gallery__item-1 {
  height: 290px;
}

<div class="container">
  <div class="gallery">
    <div class="gallery__item gallery__item-1"></div>
    <div class="gallery__item"></div>
    <div class="gallery__item"></div>
    <div class="gallery__item"></div>
    <div class="gallery__item"></div>
    <div class="gallery__item"></div>
    <div class="gallery__item"></div>
    <div class="gallery__item"></div>
  </div>
</div>

С помощью grid можно сделать так:

.container {
  width: 1040px;
  margin: 0 auto;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  gap: 50px;
  padding: 50px;
  background: #00B8C9;
}

.gallery__item {
  background: #DA5A60;
  border: 1px solid #000;
  box-sizing: border-box;
  width: 280px;
  height: 120px;
}

.gallery__item-1 {
  grid-row: 1 / 3;
  height: 290px;
}

<div class="container">
  <div class="gallery">
    <div class="gallery__item gallery__item-1"></div>
    <div class="gallery__item"></div>
    <div class="gallery__item"></div>
    <div class="gallery__item"></div>
    <div class="gallery__item"></div>
    <div class="gallery__item"></div>
    <div class="gallery__item"></div>
    <div class="gallery__item"></div>
  </div>
</div>

Как сделать флекс элементы с разной высотой?

Ответы