@ForSureN1
frontend dev

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

Добрый день. Подскажите как сделать вот такую сетку с помощью grid, но нужно учитывать то, что изображения может быть больше 5, и если их будет больше то следующие будут такими же маленькими идти в ряд снизу.
Я попытался самостоятельно но у меня не вышло. я дал первому элементу grid-column-start: 1; grid-column-end: 3;
но соседние 2 ячейки стали занимать всю высоту, и вытеснили остальные 2 изображения.
Заранее благодарю.617a73051f265708235995.jpeg
Не понимаю как сделать так что ячейка не занимала всю высоту, а только свою
617a79433fdff521595281.jpeg
https://codepen.io/forsuren1/pen/NWvgYBr
  • Вопрос задан
  • 55 просмотров
Решения вопроса 1
Pavel-ww
@Pavel-ww
Не понимаю как сделать так что ячейка не занимала всю высоту, а только свою

Не туда смотрите. Кроме колонок существуют еще и строки.
Добавьте для первого элемента
.activity__item.grid {
	grid-column: 1/3; /*сокращенный вариант вашего кода*/
	grid-row: 1/3; 
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@m3nnn0
Можно сделать их как два больших блока(в одном одна большая картинка, во втором 4 маленьких)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы