Как сделать такое расположение элементов?

Question

[embiid]

ребят, поджскажите как можно сделать последние два блока как на картинке используя grid

к примеру, я хотел сделать grid-template-columns/rows : repeat(3, 1fr)
но потом понял что я не смогу grid-row: 1/n сделать.

как можно такое сделать используя grid-сетку?

Answer 1

[Арсений Матыцин]

.parent {
grid-template-columns : repeat(6, 1fr)
... }
.child { /*всем*/
grid-column-end: span 2
... }
.child { /*последним двум*/
grid-column-end: span 3
... }

Но вообще grid пока еще не совместимы с ослом. Я бы воздержался их использовать, если ты не клал болт на поддержку IE.

Answer 2

[Aetae]

Ну какбэ очевидно, что вместо трёх колонок надо шесть и элементы, соответственно, двух и трёх колоночные.
Вообще же для такого лучше флекс подходит.

Comments

[embiid]

да я сразу понял что надо было большей разметкой сетку делать, но думал что есть оптимальнее вариант.
спасибо!

[AMK882KXX]

А подскажите, пожалуйста, почему не bootstrap?