Верстка сайту з використанням CSS Grid Layout

Верстка сайту з використанням CSS Grid Layout

CSS Grid — двовимірна система розташування, яка кардинально змінила підхід до складних макетів. Там де раніше потрібне було абсолютне позиціонування, JavaScript-плагіни або Bootstrap-сітки з 12 колонок, тепер достатньо декілька рядків CSS.

Коли Grid, коли Flexbox

Просте правило: Grid — для двовимірних розташувань (рядки І стовпці одночасно), Flexbox — для одновимірних (рядки АБО стовпці).

• Основний макет сторінки (header / sidebar / main / footer) — Grid
• Галерея карток — Grid
• Навігаційний список — Flexbox
• Кнопка з іконкою та текстом — Flexbox
• Форма з полями — обидва варіанти залежно від складності

Макет сторінки

.layout {
  display: grid;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  grid-template-columns: 280px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
}

.layout__header  { grid-area: header;  }
.layout__sidebar { grid-area: sidebar; }
.layout__main    { grid-area: main;    }
.layout__footer  { grid-area: footer;  }

@media (max-width: 768px) {
  .layout {
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
}

grid-template-areas — візуальний запис розташування прямо в CSS. При зміні медіазапиту достатньо переформатувати grid-template-areas, не торкаючись дочірніх елементів.

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

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

auto-fill + minmax(280px, 1fr) — сітка сама вирішує, скільки колонок поміститься. На мобільних — 1 колонка, на планшеті — 2–3, на десктопі — 4+. Жодного медіазапиту.

Різниця auto-fill vs auto-fit:

• auto-fill — створює пусті трекі, якщо елементів менше ніж колонок
• auto-fit — пусті трекі стискуються до нуля, елементи розтягуються

Для галереї з фіксованим розміром карток — auto-fill. Для списку з розтягуючими елементами — auto-fit.

Щільна упаковка (masonry-like)

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 10px; /* Маленький крок */
  gap: 16px;
}

.gallery__item--tall  { grid-row: span 20; }
.gallery__item--short { grid-row: span 12; }

Або CSS-only masonry (Firefox 126+, Chrome з прапором):

.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  gap: 16px;
}

Поки не везде підтримується — для продакшену потрібен поліфіл (JavaScript-based masonry) як резервний варіант.

Вирівнювання елементів

.hero {
  display: grid;
  place-items: center; /* justify-items + align-items: center одним рядком */
  min-height: 100vh;
}

/* Конкретний елемент — виштовхнути вправо */
.nav__cta {
  margin-inline-start: auto; /* або: justify-self: end в grid-контексті */
}

Перекриття елементів

Grid дозволяє накласти елементи один на одного без position: absolute:

.hero-banner {
  display: grid;
  grid-template-areas: "content";
}

.hero-banner__image,
.hero-banner__content {
  grid-area: content; /* Обидва займають одну клітинку — перекриваються */
}

.hero-banner__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-banner__content {
  z-index: 1;
  padding: 48px;
  align-self: end;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
}

Підсітка (subgrid)

Підтримується у всіх сучасних браузерах з 2023 року. Дозволяє дочірнім елементам вирівнюватися по сітці батька:

.product-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.product-card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid; /* Заголовок, опис та кнопка вирівнені по всіх картках */
}

.product-card__title       { grid-row: 1; }
.product-card__description { grid-row: 2; }
.product-card__action      { grid-row: 3; align-self: end; }

Без subgrid вирівнювання вмісту карток по висоті вимагало JavaScript або костилів. Тепер — два властивості CSS.

Holy Grail layout (приклад з реальними одиницями)

.page {
  display: grid;
  grid-template:
    "header" 64px
    "main"   1fr
    "footer" auto
    / 1fr;
}

@media (min-width: 1024px) {
  .page {
    grid-template:
      "header  header  header"  64px
      "nav     main    aside"   1fr
      "footer  footer  footer"  auto
      / 240px  1fr     320px;
  }
}

Одна декларація grid-template включає grid-template-areas, grid-template-rows та grid-template-columns.

Поширені помилки

Grid для всього. Grid-контекст важче Flexbox. Для простого ряду кнопок — Flexbox швидше та простіше.

Явні рядки без auto.

/* Проблема — якщо контенту більше 3 рядків, він вийде за межі */
grid-template-rows: 200px 100px 300px;

/* Правильно */
grid-auto-rows: auto;
/* або */
grid-template-rows: auto 1fr auto;

Ігнорування gap на користь margin. В grid-контексті gap — правильний інструмент. margin на дочірніх елементах ламає вирівнювання.

Терміни