Как создать такой вид при такой HTML структуре?

Question

[DeniSidorenko]

Привет есть такой вид блоков. Первый блок имеет 50% ширину всего контейнера и 100% высоту. А след 4 блока идут по 25% ширины и 50% высоты.
Внимание на скриншот


Проблема в том что мне требуется такая HTML структура, без сторонних Wrapperов

<div class="items">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Какими стилями можно подогнать такой вариант разметки

Пожалуйста без доп библиотек. Требуется чистый HTML

Comments

[Rustam Bainazarov]

Grid или… position: absolute :))

[archelon]

Добавлю, что если важна поддержка старых браузеров, можно «по старинке» флоатами.

Answer 1

[Даниил Маслов]

CSS Grid.

Comments

[DeniSidorenko]

Спасибо, попробую

Answer 2

[MamaLuyba]

да, через гриды.
типа такого:

#wrapper {
 display: grid;
 grid-template-columns: 50% 25% 25%;
 grid-template-areas: 
'first second fourth'
'first third fifth';
}

ну и прописать блокам соответствующее имя grid-area: 'first' и т.д.

Comments

[DeniSidorenko]

Спасибо, попробую

Answer 3

[Виталий Першин]

Вставлю свои 5 копеек на флексах, но это не самое лучшее решение:

Comments

[DeniSidorenko]

Интересное решение, а почему она является не самым лучшим? Флексы вроде отлично подходят и все логично, просто вместо vh надо задавать 50%, а у родителя задать фикс. высоту

[Виталий Першин]

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

[Rustam Bainazarov]

DeniSidorenko, фиксированная высота.

[Виталий Першин]

Вот тоже самое, но с высотой в процентах:

[DeniSidorenko]

Виталий, Вот именно, гриды пока что имеют слабую поддержку браузеров. Не хочу что пока их использовать. А про фикс высоту, я имел задать фикс высоту родителя, и уже от нее дать проценты