Как с помощью css grid сделать флоу, где первые 2 элемента делятся на 2 колонки, а все последующие (кол-во заранее неизвестно) на 3?

Question

[Кирилл]

как с помощью css grid сделать флоу, где первые 2 элемента делятся на 2 колонки, а все последующие (кол-во заранее неизвестно) на 3? Главное что хочу - обойтись одним контейнером у карточек

скрин примера

Answer 1

[Вадим]

Главное что хочу - обойтись одним контейнером у карточек

Кирилл, только одним, мне кажется, не обойтись, потому что в первой строке, на глаз, между элементами больше отступ пикселя на 2-4, чем между остальными. То есть column-gap разный.

И тогда всё же 2 грида.

Ну или первым элементам задать дополнительный margin - справа для первого и слева для второго.

Answer 2

[Антон Антон]

Сделать два грида. Сделать один грид на шесть колонок и colspan.

Comments

[Вадим]

Зачем 2?
Один на 6.
Просто первым 2м элементам указать span 3, остальным span 2

[Антон Антон]

Вадим, это два способа решения задачи.

Зачем 2?

один под другим, в одном 2 колонки, в другом - 3. визуально будет что нужно

Один на 6.
Просто первым 2м элементам указать span 2

Это второй способ решения, примерно равнозначный. Только стили надо будет всем элементам добавлять (ну или селектор хитрый). Первым элементам colspan 3 остальным colspan 2

[Вадим]

Антон Антон, Да, верно. поправил