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

Question

[froggush]

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

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



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

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

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


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



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

Answer 1

[Ankhena]

Это делается гридами, с помощью auto-fit и minmax

Например,

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

Comments

[froggush]

Пробовал. При minmax(200px, 1fr) карточки напихиваются в ряд по 5 штук, хотя надо по три (нужно, чтобы изначальная десктоп-версия выдавала карточки по 332px, а если писать minmax(200px, 332px), то карточки не сжимаются, а сразу переносятся. При minmax(200px, calc(30% - 10px) карточки сжимаются только до первого переноса, потом остаются сжатыми и место не занимают

Крч, чё-то от лукавого :(

[Ankhena]

froggush,

Крч, чё-то от лукавого :(

Ну да, математика вся такая.
:)

Если вам нужно по 3 карточки, то так и пишите repeat(3, 1fr).
Если минимальная ширина карточек 332px, то пишите repeat(auto-fit, minmax(332px, 1fr))

Также есть функции clamp, min и max.

Вам нужно определиться, что первично: ширина или количество.

Ну и научиться нормально сразу формулировать вопросы и прикреплять к ним ссылки на песочницы с кодом (например, codepen.io) с видимой проблемой.

[szQocks]

froggush, вот я делал, но там такая себе верстка, можно было и получше сверстать, и для 320 нету адаптива
Ссылка

[froggush]

szQocks, :D привет, друг-соискатель) А как бы для 320 делал, как думаешь? Я чё-то уже склоняюсь к тому, чтобы через JS костыльнуть, потому что ну не выходит у меня по css настроить так, чтобы не больше 320 было

[szQocks]

froggush, обычные медиа запросы и стили подправить :D

[Ankhena]

froggush, вы понимаете, что фразы

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

и

чтобы не больше 320 было

противоречат друг другу?

[froggush]

Ankhena, Почему? Мне нужно, чтобы в строке было не больше 3х элементов при десктопе, при этом ширина каждой карточки не должна превышать 320px, там родительски элемент такой, что 3 карточки по 320px на дексктопе его заполнят тютелька в тютельку. Вот.

Тут скорее дело в том, что вы правы и я вопросы плохо формулирую. Но я сегодня уже пересидел, плохо соображаю.

[froggush]

szQocks, да я чё-то накрутил их уже и так и сяк и ничего не вышло. Костыльную JSом и отправлю. Завтра уже буду разбираться как следует со стилями.

Вам уже ответили что нибудь работодатели?

[szQocks]

froggush, я делал это задание 9 месяцев назад, мне отказали потому что кандидата уже нашли, своего рода - я не успел), но сейчас я не буду пытаться трудоустроиться туда, не переживай друг, я тебе не конкурент)

[froggush]

szQocks, да насчёт конкуренции я не переживаю) просто интересно