Адаптивні компоненти з CSS Grid та Custom Properties

Вступ

У сучасній фронтенд-розробці компоненти повинні бути не лише візуально привабливими, а й адаптивними до різних розмірів екранів. CSS Grid у поєднанні з CSS Custom Properties (змінними) дає потужний інструментарій для створення повторно використовуваних компонентів, які легко налаштовуються й масштабуються. У цій статті розглянемо концепцію, наведемо приклад адаптивної картки продукту й дамо практичні поради щодо оптимізації.

Чому обрати CSS Grid і Custom Properties

CSS Grid створений для складних макетів, де потрібно контролювати рядки й колонки. Custom Properties дозволяють зберігати значення, які можна перевизначати на різних рівнях, що робить компоненти більш гнучкими. Комбінація цих технологій мінімізує повторення коду і спрощує підтримку дизайну.

Переваги підходу

• Легко змінювати розміри й відступи через змінні
• Гнучке розташування елементів без зміни HTML
• Проста адаптація під різні точки перелому
• Краща читаність і підтримуваність стилів

Приклад: адаптивна картка продукту

Розглянемо компонент картки зображення, заголовком, коротким описом і набором кнопок. Використаємо Grid для розташування і Custom Properties для контролю розмірів та відступів.

/* Кореневі змінні, можна перевизначити на сторінці або у контейнері */
:root {
  --card-gap: 1rem;
  --card-padding: 1rem;
  --card-radius: 8px;
  --card-max-width: 400px;
}

.card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  gap: var(--card-gap);
  padding: var(--card-padding);
  border-radius: var(--card-radius);
  max-width: var(--card-max-width);
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.card__media {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: calc(var(--card-radius) - 2px);
}

.card__body {
  display: grid;
  gap: 0.5rem;
}

.card__actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* Адаптація для ширших екранів */
@media (min-width: 700px) {
  .card {
    grid-template-columns: 150px 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
  }

  .card__media {
    height: 100%;
    border-radius: var(--card-radius);
  }

  .card__actions {
    align-self: end;
  }
}

HTML структура може бути такою:

<article class='card'>
  <img class='card__media' src='...jpg' alt='Назва продукту' />
  <div class='card__body'>
    <h3>Назва продукту</h3>
    <p>Короткий опис продукту, який пояснює основну цінність та характеристики.</p>
    <div class='card__actions'>
      <button>Деталі</button>
      <button>Купити</button>
    </div>
  </div>
</article>

Налаштування та варіанти використання

За допомогою змінних легко створювати варіанти картки без дублювання стилів. Наприклад, можна змінювати висоту медіа чи максимальну ширину для різних контекстів:

.card--compact {
  --card-gap: 0.5rem;
  --card-padding: 0.5rem;
  --card-max-width: 300px;
}

.card--large {
  --card-max-width: 600px;
}

Поради щодо доступності

• Завжди додавайте зрозумілий alt для зображень
• Переконайтеся, що кнопки мають фокус-стан для клавіатурної навігації
• Не покладайтеся лише на колір для передачі інформації

Оптимізація та масштабування

Якщо у проєкті багато схожих компонентів, створіть набір глобальних змінних для відступів, радіусів і тіней. Використовуйте каскад змінних на рівні блоків для локальних перевизначень. Це дозволяє підтримувати консистентність дизайну й швидко адаптувати інтерфейс під нові вимоги.

Короткий чекліст перед релізом

• Перевірити адаптивність на основних точках перелому
• Переконатися в читабельності тексту та контрасті
• Перевірити поведінку при зміні змінних та варіантів
• Оптимізувати зображення для швидкого завантаження

Підсумок: поєднання CSS Grid і Custom Properties робить компоненти більш гнучкими та підтримуваними. Почніть з простої структури, визначте змінні для ключових властивостей і поступово додавайте варіанти, щоб задовольнити потреби різних пристроїв і контекстів.

Comments

comments