Как сделать такую резиновую сетку?

Question

[ForSureN1]

Добрый день. Подскажите как сделать вот такую сетку с помощью grid, но нужно учитывать то, что изображения может быть больше 5, и если их будет больше то следующие будут такими же маленькими идти в ряд снизу.
Я попытался самостоятельно но у меня не вышло. я дал первому элементу grid-column-start: 1; grid-column-end: 3;
но соседние 2 ячейки стали занимать всю высоту, и вытеснили остальные 2 изображения.
Заранее благодарю.
Не понимаю как сделать так что ячейка не занимала всю высоту, а только свою

https://codepen.io/forsuren1/pen/NWvgYBr

Comments

[Ankhena]

я дал первому элементу grid-column-start: 1; grid-column-end: 3;
но соседние 2 ячейки стали занимать всю высоту, и вытеснили остальные 2 изображения.

Если один блок занимает 2 клетки по высоте и 2 по ширине, то разумно так и писать.
А не только про ширину.
И всё получится.

[ForSureN1]

Ankhena, Да, сам исправил, методым тыка :D

Answer 1

[Pavel-ww]

Не понимаю как сделать так что ячейка не занимала всю высоту, а только свою

Не туда смотрите. Кроме колонок существуют еще и строки.
Добавьте для первого элемента

.activity__item.grid {
	grid-column: 1/3; /*сокращенный вариант вашего кода*/
	grid-row: 1/3; 
}

Comments

[ForSureN1]

Да, спасибо, я разобрался, не знаю почему, но я уверен что я пробовал так писать и с первого раза у меня почему то не получалось..

Answer 2

[m3nnn0]

Можно сделать их как два больших блока(в одном одна большая картинка, во втором 4 маленьких)