Карточка — один из самых универсальных строительных блоков современных сайтов: карточка товара в каталоге, карточка статьи в блоге, карточка сотрудника на странице команды. Структура у них похожая, и разобравшись однажды, дальше остаётся только менять содержимое под конкретную задачу.
Обычно карточка состоит из изображения сверху, заголовка, короткого описания и какого-то действия внизу — кнопки или ссылки. Важно, чтобы эта нижняя часть оставалась на одном уровне у всех карточек в ряду, даже если текста описания у них разное количество — иначе ряд выглядит неаккуратно, будто карточки разной высоты.
Flexbox с направлением в колонку внутри самой карточки хорошо решает эту задачу — если растянуть карточку на всю доступную высоту, а кнопку внизу прижать через margin-top auto, кнопки во всех карточках ряда выровняются по нижнему краю автоматически, независимо от длины текста над ними.
Сетку из самих карточек чаще всего строят через Grid с auto-fit и minmax — это позволяет карточкам самим решать, сколько их поместится в ряд при текущей ширине экрана, без необходимости прописывать отдельный медиазапрос под каждое возможное разрешение.
Лёгкая тень и небольшое увеличение при наведении — частый приём, который добавляет карточке ощущение интерактивности, подсказывая пользователю, что на неё можно и стоит кликнуть. Транзишн на изменение тени делает этот эффект плавным, а не резким.
Изображение внутри карточки лучше обрезать до единого соотношения сторон через object-fit cover — тогда даже фотографии разного исходного размера и пропорций будут смотреться в сетке карточек аккуратно и единообразно.
Готовые примеры вёрстки карточек с исходным кодом можно посмотреть в коллекции сеток карточек на web.dev.
