Как в grid растянуть последние элементы?

Question

[Иван]

Всем приветы, подскажите как это сделать. Я еще сетку не доконца освоил и много не понимаю.
В общем надо сделать так, что если в сетке в последней строке элементов меньше, чем положено, чтобы они растягивались и занимали свободное пространоство. Нужен аналог в общем какой-то аналог flex-grow для сетки.

Comments

[Вадим]

https://cssgridgarden.com/#ru

[Иван]

Вадим, прошел всю игру, там нет того, что мне нужно

[Ankhena]

Подумайте как они должны себя вести?

Вам поможет наименьшее общее кратное. Считаете и делаете нужное количество грид-линий. Потом задаете grid-column на нужное количество линий.
Можно на js, можно попробовать нагородить на css через :nth-child и :not

[Иван]

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

[Ankhena]

Иван Анатоличь, ну не используйте гриды, что еще сказать...
Есть флексы, плагины типа masonry или isotope и т.д.

Answer 1

[D M]

Была похожая история. В блоке было по 2 элемента в строке. Если элементов нечётное количество, то нужно растянуть последний на всю ширину блока.
Решил так:
Если в цикле нечётное количество элементов, то добавить к последнему класс "full-row".

стили для класса:
grid-column: 1 / span 2;

Answer 2

[Сергей delphinpro]

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

Comments

[Иван]

и че делать?

[n1ksON]

Иван Анатоличь, вывод: используйте флексы)

[Сергей delphinpro]

Иван Анатоличь,
— У меня не получается отверткой вкрутить гвоздь
— Это невозможно
— И че делать?

[Сергей delphinpro]

Но, конечно, всегда можно взять отвертку с тяжелой ручкой и вбить-таки гвоздь...