Коротко: каталог товаров в HTML+CSS — это сетка карточек с фото, названием и ценой, плюс фильтры и постраничная навигация. Вёрстка решается гридом и адаптивом, но для реальной работы нужен сервер (данные, фильтры, корзина) или CMS вроде WooCommerce.
Из чего состоит каталог
| Элемент | Зачем |
|---|---|
| Сетка карточек | показать товары |
| Фильтры | сузить выбор |
| Сортировка | по цене, новизне |
| Пагинация | не грузить всё сразу |
| Состояние «ничего не найдено» | понятный результат |
Вкладки: примеры
.catalog {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 24px;
}Гибкая сетка: карточки сами переносятся на новую строку, минимальная ширина 240px, колонки тянутся через 1fr.
<a class="card" href="/product/1">
<img class="card__img" src="p1.jpg" alt="Настольная лампа">
<div class="card__body">
<h3 class="card__title">Настольная лампа</h3>
<span class="card__price">2 400 ₽</span>
</div>
</a>.card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.card__img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.card__price { margin-top: auto; font-weight: 600; }Карточка целиком — ссылка, картинка квадратная (aspect-ratio), цена прижата к низу (margin-top: auto) — карточки выглядят ровно независимо от длины названия.
<aside class="filters">
<label>Цена от <input type="number"></label>
<label>Цена до <input type="number"></label>
<button type="button">Показать</button>
</aside>Фильтры обычно в сайдбаре (десктоп) и в выдвижной панели (мобильные). Без сервера они не влияют на список — нужна логика фильтрации.
<nav class="pager" aria-label="Страницы">
<a class="is-active" href="?page=1">1</a>
<a href="?page=2">2</a>
<a href="?page=3">3</a>
</nav>Пагинация с активной страницей. Альтернатива — «Показать ещё» или бесконечная прокрутка (для SEO важно оставить доступные ссылки на страницы).
Практика: сверстать каталог
- Соберите сетку карточек через
auto-fillиminmax. - Сделайте карточку целиком ссылкой.
- Задайте картинке пропорции и
object-fit: cover. - Прижмите цену к низу через
margin-top: auto. - Добавьте блок фильтров и сортировки.
- Сделайте пагинацию и состояние «ничего не найдено».
- Проверьте на мобильном: 1–2 карточки в ряд.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Карточки «рваные» | разная высота | flex-колонка + margin-top: auto |
| Фото искажены | нет object-fit |
object-fit: cover |
| Фильтры не работают | нет серверной логики | подключить бэкенд/плагин |
| Долго грузится | все товары сразу | пагинация и ленивая загрузка |
Проверьте себя
Вопросы и ответы
WooCommerce: он даёт каталог, фильтры, корзину и оплату. Стили каталога настраивают в теме или доп. стилях.
Бесконечная прокрутка удобнее на мобильных, но для SEO лучше оставить страницы доступными по ссылкам (скрытая пагинация).
Обычно 12–24. Больше — дольше загрузка; меньше — больше кликов. Начните с 12 и смотрите на поведение.
Да, они помогают навигации и поисковикам понимать структуру каталога. Плюс в сниппете могут отображаться «пути».
Итоги
- Каталог — сетка карточек, фильтры, сортировка, пагинация.
- Карточку делают ссылкой и выравнивают по высоте.
- Изображения — единые пропорции и
object-fit. - Для работы нужен сервер или WooCommerce.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.