F

3. Адаптивная сетка карточек

Средне
responsivegridcards

Создайте адаптивную сетку из карточек с помощью CSS Grid, которая подстраивается под ширину экрана.

Каждый способ должен быть реализован независимо в своём контейнере:

  1. Использовать CSS Grid
  2. Минимальная ширина карточки — 250px
  3. Отступ между карточками — 16px
  4. Карточки должны автоматически перестраиваться при изменении ширины

Создайте сетку .grid, в которой карточки .card автоматически занимают доступное пространство. Каждая карточка должна быть минимум 250px шириной. Между карточками должен быть отступ 16px. При уменьшении экрана карточки должны перестраиваться в меньшее количество колонок.

Примеры

Пример 4
Вход:
6 карточек в контейнере шириной 1200px
Ожидаемый результат:

4 колонки по ~284px (1200 - 3*16 gap) / 4

Подсказка:

auto-fill + minmax(250px, 1fr) позволяет карточкам занимать всё доступное пространство

Ограничения

  • Нельзя использовать медиа-запросы
  • Нельзя менять HTML-разметку
0% принято
0 решений