Адаптивная сетка на CSS Grid

Опишите ограничение карточки

Для каталога важнее минимальная удобная ширина карточки, чем название устройства. Функция minmax задаёт диапазон размера колонки. repeat вместе с auto-fit создаёт столько колонок, сколько помещается, и позволяет занятым колонкам использовать свободное пространство.

Добавим min(100%, 16rem), чтобы минимальная ширина колонки не оказалась шире очень узкого контейнера. Верхняя граница 1fr распределяет оставшееся место между колонками.

.catalog {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.25rem;
}
.card { min-width: 0; }
.card img { width: 100%; height: auto; }

Проверьте содержимое

Даже адаптивная сетка может переполняться из-за длинного URL, таблицы или фрагмента кода. Для текста используйте overflow-wrap: anywhere там, где перенос допустим. Блокам кода лучше дать собственную горизонтальную прокрутку: так сохранится форматирование, а вся страница не станет шире экрана.

У auto-fill и auto-fit разное поведение при свободных ячейках. Первый сохраняет пустые колонки, второй схлопывает их. Проверьте вариант с одной карточкой: именно там разница особенно заметна.

Сохраните порядок чтения

Расположите карточки в HTML в том порядке, в котором их нужно читать. Перестановка через CSS не обязательно меняет порядок обхода клавиатурой. Для обычного каталога визуальное расположение и порядок документа лучше согласовать.

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