Как создать такую сетку CSS Grid?

Question

[Иван Гордиенко]

Доброго времени суток всем!



Есть подобная структура, но сейчас это всё очень костыльно и плохо.
Требуется сделать так, чтобы в первом ряду было максимум 6 элементов, если меньше, то они равномерно размещались по ширине, а после 6 элемента, каждый следующий имел ширину во весь контейнер, элементов может быть очень много, главное, чтобы каждый следующий после 6 шёл во всю ширину. Пробовал уже и через grid-area с grid-template-areas, и даже возвращался к флексам уже, прошу помощи в поиске решения.

Comments

[Ankhena]

Как-то так https://jsfiddle.net/yfjcnkxu/
Но есть нюансы.
Их решит js

[Иван Гордиенко]

Ankhena, доброго дня. Да, с JS всё проще и решение рабочее уже было найдено, но задался вопросом чистой вёрстки, без помощи скриптов. Видимо, это невозможно :(

[Ankhena]

Вячеслав Дроздов, я его вижу, только при очень близком наполнении блоков.
Придумаете вариант без js, напишите,пожалуйста

[Иван Гордиенко]

Ankhena, конечно!
\

Answer 1

[Антон Литвиненко]

я бы сделал на флексах. всем карточкам flex-grow: 1;
а карточкам nth-child(n+7) ширину 100%. и другие стили
другие стили можно задать через добавление дополнительного класса также. при интеграции в цикле завести счетчик и после 6й итерации добавлять итемам новый класс

Comments

[Иван Гордиенко]

А если элементов всего 2? :) разве флекс отработает?

[Юрий]

Дополню ответ Антона примером:

[Антон Литвиненко]

Юрий, я не проверял и ваш пример на мобиле переносит первые 6 по три, но мне кажется так даже лучше

[Иван Гордиенко]

Юрий, выглядит прекрасно, но у меня по какой-то причине они не влазят в строку, видимо выдавливает какой-то контент. В этом проблема. Решение прекрасно выглядит для "пустых" блоков. Всё же - спасибо, есть над чем поработать.