Сверстать адаптивную сетку карточек
Вопрос
Сверстай вслух каталог товаров: карточки с картинкой, названием, описанием и кнопкой. На широком экране 4 в ряд, на телефоне 1. Как сделаешь?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Семантика: список (`ul`/`li`) или `article` на карточку, заголовок, кнопка как `button` или ссылка
Сетка `repeat(auto-fill, minmax(240px, 1fr))` с `gap`, без медиазапросов
Картинка с `aspect-ratio` и `object-fit: cover`, `alt` и `loading="lazy"`
Карточка флекс-колонкой, кнопка внизу через `margin-top: auto`, одна высота в ряду
Обрезка названия или описания через line-clamp
Проверка длинных текстов и узкого экрана
Что могут спросить следом
- Как ограничить максимум четырьмя колонками?
- Чем
auto-fillотличается отauto-fit? - Что если карточки должны подстраиваться под ширину своего контейнера, а не окна?
Разбор
Начну с разметки: каталог - список ul, каждая карточка li с article внутри: картинка с осмысленным alt и loading="lazy", заголовок h3, описание и кнопка. Контейнер - грид: grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px. Колонок станет столько, сколько влезет, на телефоне одна, без единого медиазапроса. Чтобы не было больше четырёх, ограничу max-width контейнера. Картинке задам aspect-ratio: 4 / 3; object-fit: cover; width: 100%, тогда карточки не прыгают при загрузке. Саму карточку сделаю флекс-колонкой, а кнопке margin-top: auto: грид растягивает карточки ряда до одной высоты, и кнопки встают на одну линию. Описание обрежу до трёх строк. Если карточки живут в разных по ширине колонках, переключусь на контейнерные запросы.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.