Як верстати адаптивну картку товару на HTML та CSS: практичний підхід з продакшену

Картка товару — один із найскладніших компонентів у frontend-розробці. На макеті вона виглядає просто: зображення, назва, ціна, кнопка. Але в реальному проєкті все інакше — назви різної довжини, фото різних пропорцій, характеристики “розлазяться”, а кнопки в каталозі починають жити своїм життям.

Саме тому якісна верстка картки — це не про “щоб красиво виглядало”, а про стабільність компонента в будь-якому сценарії: каталог, рекомендації, мобільна версія, різний контент.

З чого насправді складається картка товару

У продакшн-верстці картка — це не окремий блок, а універсальний компонент, який має:

• однаково працювати в різних списках
• масштабуватись під різний контент
• не ламати layout при зміні даних

Тому правильна структура завжди ділиться на 3 частини:

• медійна зона (зображення)
• контент (назва, характеристики)
• зона дії (ціна + кнопка)

Це дозволяє уникнути хаосу в CSS і спрощує повторне використання компонента.

Правильна HTML-структура картки товару

<div class="product-card">
  <a href="#" class="product-card__image">
    <img src="product.jpg" alt="Назва товару">
  </a>

  <div class="product-card__content">
    <h3 class="product-card__title">
      Назва товару
    </h3>

    <ul class="product-card__features">
      <li>Потужність: 2 кВт</li>
      <li>Тип: електричний</li>
      <li>Гарантія: 24 місяці</li>
    </ul>

    <div class="product-card__bottom">
      <div class="product-card__price">12 999 грн</div>
      <button class="product-card__button">
        Додати в кошик
      </button>
    </div>
  </div>
</div>

CSS-прийоми, які реально використовуються в продакшені

.product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  overflow: hidden;
}

.product-card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card__content {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 12px;
}

.product-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-card__button:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

Адаптивність без ламання компонента

.products {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .products {
    grid-template-columns: repeat(4, 1fr);
  }
}

UX: як виглядає правильна картка товару

Верстка напряму впливає на поведінку користувача.

Ключові принципи:

• ціна — візуальний акцент
• кнопка — завжди в одному місці
• текст — не більше 2–3 рядків
• характеристики — скануються за 2–3 секунди

Особливо це критично для ніш, де товари мають багато технічних параметрів. У таких випадках користувач не “читає”, а швидко сканує.

Саме тому у великих інтернет-магазинах техніки структура картки будується навколо швидкого сприйняття інформації. Наприклад, на Венкон використовується підхід, де ключові характеристики подаються компактно, без перевантаження інтерфейсу, а користувач отримує всю потрібну інформацію без зайвих переходів.

Це не випадкове рішення. ВЕНКОН — це повноцінна платформа з продажу техніки, підбором рішень, монтажем і сервісом. Велика кількість товарів і складна структура каталогу змушують будувати інтерфейс максимально логічно, що добре демонструє практичний підхід до верстки у реальному e-commerce.

Семантика та доступність

• заголовок — це h2/h3, а не div
• alt у зображенні має описувати товар
• кнопка — це <button>, а не псевдоелемент
• фокус повинен бути видимий

Типові помилки у верстці карток

Різна висота карток
Причина: немає flex-логіки
Рішення: margin-top: auto

Стрибки при завантаженні
Причина: відсутні розміри зображень
Рішення: aspect-ratio

Кнопка “плаває”
Причина: змішана структура
Рішення: окремий bottom-блок

Занадто багато тексту
Причина: відсутність обмежень
Рішення: line-clamp

Ламана адаптивність
Причина: desktop-first підхід
Рішення: mobile-first

Висновок

Якісна картка товару — це не про дизайн, а про систему:

• правильна HTML-архітектура
• передбачуваний CSS
• контроль контенту
• стабільна адаптивність

У реальних проєктах саме ці речі відрізняють “звичайну верстку” від тієї, що реально працює і не ламається через тиждень після релізу.

Frontend у e-commerce давно перестав бути просто версткою — це інструмент, який напряму впливає на конверсію і поведінку користувача.