Css grid, как растянуть последние блоки по ширине?

Question

[Breeze1]

Есть такой пример, Клик codepen

Можно как-то растянуть последние 3 элемента, чтобы они заполнили свободное пространство ? По типу как у flex есть flex-grow: 1 ?

PS. Либо может как-то по другому можно сделать такую сетку на гридах ? мне нужно точно также как в примере, только 8-9-10 элемент тянутся на 33.333%

Answer 1

[Сергей delphinpro]

Если количество блоков не определено заранее, то как во флексах сделать не выйдет.

Если количество блоков фиксировано, то сделать можно. Нужно увеличить количество колонок до общего кратного всех вариантов количеств ячеек в строках. В данном случае вам нужно НОК от двух чисел - 4 и 3. Это 12 вроде бы.

Теперь задаете сетку в 12 колонок и раскидываете по ним блоки.

Comments

[Breeze1]

Спасибо, но к сожалению не определенно, точнее сразу блоков будет 10, но есть кнопка "показать еще". Прогер будет туда еще блоки грузить

[Сергей delphinpro]

Breeze1, ну тут можно во-первых, грузить по 10 блоков.
Во-вторых, предусмотреть все 10 возможных вариантов по количеству блоков от 1 до 10.
Прописать все это в классах, и объяснить программисту, что в случае, если блоков меньше 10, то нужно навешивать другие классы.

[Ankhena]

Breeze1, если известно количество колонок, то решается за счет nth-child для любого количества элементов.
https://css-live.ru/articles/resheno-s-pomoshhyu-c...