Домашнее задание
Задача: Переделайте фиксированную сетку карточек в fluid/responsive вариант: контейнер ограничьте через max-width, карточки разложите через auto-fit и minmax().
1
Создайте HTML
Семантический <main> с контейнером и несколькими <article>-карточками. Понятные классы (.page, .card-grid, .card). Опора — раздел «Примеры», пример 5.
2
Напишите базовый CSS
Резиновый контейнер с пределом (width: min(100% - 2rem, 72rem) + margin-inline: auto) и сетку на repeat(auto-fit, minmax(16rem, 1fr)). Сначала добейтесь читабельной версии без единого breakpoint — см. «Теория».
3
Проверьте ширины
Откройте DevTools (F12), включите эмуляцию устройства и проверьте 320px, 768px, 1024px и 1200px. Найдите ширину, где контенту тесно — это и есть «честный» брейкпоинт.
Мини-чеклист
- Нет горизонтального скролла ни на одной из проверенных ширин.
- Текст остаётся читаемым (строки не растягиваются на весь широкий экран).
- Карточки переходят из ряда в столбец сами, без жёстко прописанных колонок.
- Breakpoint (если добавили) объясняется содержимым, а не случайным числом.
Связь с уроком: готовый каркас — в «Решениях»; разбор типичных провалов (скролл, длинные строки) — в «Ошибках».