Як створити адаптивну сітку з CSS Grid і Flexbox

Вступ: чому поєднувати Grid і Flexbox

CSS Grid і Flexbox — дві потужні технології для розмітки сторінок. Grid найкраще підходить для двовимірних макетів (рядки та стовпці), тоді як Flexbox — для вирівнювання елементів в одному напрямку. Поєднання дозволяє створювати складні, але при цьому прості в підтримці адаптивні інтерфейси.

Коли використовувати кожен інструмент

• Grid: глобальна структура сторінки (шапка, бічна панель, основний контент, футер).
• Flexbox: внутрішнє вирівнювання компонентів у рядку або колонці (меню, картки, кнопки).
• Комбінація: Grid для розмітки зон, Flexbox для компонентів всередині цих зон.

Базовий приклад: сітка з адаптивними колонками

Почнемо зі стандартного макета: три колонки на широких екранах, дві — на середніх, одна — на мобільних. Для цього використаємо Grid і медіа-запити.

/* Контейнер сітки */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* Плавна адаптація */
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr; }
}

Кожна карточка всередині сітки може використовувати Flexbox для вирівнювання вмісту:

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
}

Принципи створення адаптивної сітки

• Використовуйте дробові одиниці (fr) у Grid для гнучкості колонок.
• Застосовуйте gap замість margin між елементами для узгодженого простору.
• Комбінуйте auto-fit / auto-fill з minmax() для самонаповнюваних номерів колонок.

Приклад з auto-fit і minmax

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

Цей підхід дозволяє колонкам автоматично підлаштовуватись під доступну ширину: коли місця достатньо — з’являються додаткові колонки, коли місця мало — вони зменшуються до мінімуму 200px, а потім переходять в одну колонку.

Вирівнювання та порядок елементів

Grid дозволяє змінювати позицію елементів у двох вимірах, а Flexbox — легко керувати вирівнюванням та простором у одному напрямку. Ось кілька корисних прийомів:

• align-items і justify-items у Grid для вирівнювання всередині осередків.
• align-self і justify-self для індивідуального вирівнювання елемента.
• order у Flexbox для зміни порядку візуального відображення без зміни HTML.

Приклад: вирівнювання заголовка і кнопки

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header .title { margin: 0; }

Продуктивність і доступність

CSS Grid і Flexbox виконуються на стороні клієнта і зазвичай дуже швидкі. Проте слід тримати в голові кілька речей:

• Уникайте занадто складних вкладених властивостей, які ускладнюють рендеринг.
• Збережіть логічну структуру HTML — порядок у DOM має значення для скрінрідерів і SEO.
• Перевіряйте відступи і фокусні стани для доступності клавіатурної навігації.

Поради для швидкої реалізації

• Почніть із простої Grid-структури, потім додавайте Flexbox у внутрішні блоки.
• Використовуйте утиліти (наприклад, CSS-перемінні) для швидкого налаштування відступів і кольорів.
• Тестуйте на кількох ширинах екранів і пристроях — реальний результат іноді відрізняється від очікуваного.

Висновок

Поєднання CSS Grid і Flexbox дає можливість створювати адаптивні, логічні і зручні у підтримці макети. Grid відповідає за загальну структуру, а Flexbox — за точне вирівнювання всередині компонентів. Починайте з простої сітки, додавайте гнучкі внутрішні компоненти і перевіряйте результат на різних пристроях — так ви отримаєте стабільний та естетичний інтерфейс.

Comments

comments