Как сделать адаптивную grid сетку?

Question

[Solevoy_2015]

Необходимо отобразить n картинок в grid сетке, чтобы в одной строке было например 3 картинки, и в случае если картинок не хватает для заполнения строки, например их изначально 5, 3 в первую строку, 2 во вторую, чтобы 2 растянулись до 50% от родителя.

Answer 1

[Ankhena]

Грид на 6 колонок.
Все элементы занимают по 2 колонки.

А дальше строить логику на :nth-child
https://css-live.ru/articles/resheno-s-pomoshhyu-c...

Если последний элемент одновременно и второй из трех, то путь занимает 3 колонки
:nth-child(3n+2):last-child {grid-column: span 3}
Аналогично для второго с конца и одновременно первого из трех.
И для последнего с конца и одновременно первого из трех задать 6 колонок.

Либо в одну строчку на флексах :)

Comments

[Solevoy_2015]

По поводу flex поподробнее, я не так опытен в css и представляю решение через flex только примерно. Потом обязательно перепишу на гриды, пожалуйста

[Ankhena]

Solevoy_2015, https://developer.mozilla.org/ru/docs/Web/CSS/flex-grow