jean_gaben
@jean_gaben

Как сделать адаптивные карточки товара?

Здравствуйте!

Имеется вот такой макет:

62fe8c263bb8c264062437.png

При уменьшении ширины области просмотра необходимо добиться, чтобы карточки сначала сжимались, а при достижении минимального размера переносились на новую строчку и были того же размера, что и карточки на предыдущих строчках, а так же все карточки должны занимать всю ширину объекта-родителя

Проблема возникает, когда на новую строку переносится один элемент.

У меня получается либо добиться, чтобы карточки сжимались, и при достижении минимального размера переносились, строки, где полный ряд карточек опять увеличивается и занимает всё пространство, но на новой строке, если там один элемент, он большего размера (ширины, в частности), чем другие карточки.
62fe8f56cc5e8442202201.png

Или наоборот: получается сохранять размеры карточек, но при этом они переносятся сразу целыми колонками и при переносе они перестают занимать всю ширину объекта-родителя.

62fe8f2608c2f825579619.png

Как добиться??? сначала сжатия, потом переноса на новую строку, там этот элемент должен быть размером с предыдущие, а предыдущие должны занимать всю ширину объекта-родителя???
  • Вопрос задан
  • 912 просмотров
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Это делается гридами, с помощью auto-fit и minmax

Например,
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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