Двухколоночный макет из одного контейнера — утопия или нет?

Question

[SuperToster]

Всем привет!

Вот такая утопия:

<div class="grid">
  <div class="grid__item">
   1.
  </div>
  <div class="grid__item">
   2.
  </div>
  <div class="grid__item">
   3.
  </div>
  <div class="grid__item">
   4.
  </div>
</div>

Для Flex оказалось неподъемно (в рамках моих познаний). С Grid удалось слепить похожее, но не удаётся обойтись без js.

Comments

[Exploding]

А в чем собственно суть задачи?

[Александр Симонов]

Exploding, Придти к утопии)

[Exploding]

Александр Симонов, Ну с этим автор уже справился))

[Антон Спирин]

Я бы вам посоветовал хорошо изучить спецификацию flexbox и ее возможности.

[Егор Живагин]

С таким должны помогать Grid-ы, но я не настолько плотно с ними знаком, чтоб подсказывать конкретнее.
Логически, тут чётко видно два контейнера

[Сергей delphinpro]

С Grid удалось слепить похожее, но не удаётся обойтись без js.

а скрипт зачем? довольно просто лепится на гридах (но помним что они не везде поддерживаются).

Answer 1

[galkan]

Для grid вполне реально:
.grid {
display: grid;
height: 100vh;
grid-template-columns: 3rf 1fr;
grid-template-rows: auto auto 1fr;
grid-gap: 15px;
}
.grid__item {
background-color: #fcc;
}
.grid__item:nth-child(1) {
grid-area: 1 / 1 / 4 / 2;
}
.grid__item:nth-child(2),
.grid__item:nth-child(3),
.grid__item:nth-child(4) {
grid-column: 2;
}
https://codepen.io/galkinhtml/pen/ZoBpKW