Разместить 3 дива. 2 слева вместе, а 3й справа один большой [Решено]

Question

Всем привет!

На просторах интернета нашел решение как разместить 3 дива нужным мне образом.

Но у меня появилась проблема, что если я хочу добавить еще один блок, то он выходит за рамки сетки из-за статичного height в родителе.

Как решить эту проблему и сделать height в родителе гибким? Если просто убрать высоту, то тогда блоки расположатся одним столбцом.

Вот пример сетки. Нужно чтобы добавился ниже и продолжал заполняться в рамках этой ширины.

.offers {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 540px;
  width: 1000px;
  margin: 0 auto;
}

.offer {
  flex: 1 0 258px;
  width: 573px;
  border-radius: 15px;
  background-color: #577590;
}

<div class="offers">
  <div class="offer"></div>
  <div class="offer"></div>
  <div class="offer"></div>
</div>

Answer 1

Приложу решение с гридом, может все же понравится.

* { box-sizing: border-box; }
body { margin: 0; }

.grid
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  
  background-color: #577590;
  padding: 10px;
  
  min-height: 100vh;
}

.grid__item
{
  border-radius: 15px;
}

.grid__item--yellow
{
  background-color: #F3CA40;
}

.grid__item--orange
{
  background-color: #F2A541;
}

.grid__item--color
{
  background-color: #F08A4B;
  grid-row: 2 span;
}

<div class="grid">
  <div class="grid__item grid__item--yellow"></div>
  <div class="grid__item grid__item--color"></div>
  <div class="grid__item grid__item--orange"></div>
</div>

БЛОГ НА HUSL

Разместить 3 дива. 2 слева вместе, а 3й справа один большой [Решено]

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