EasyCode365EasyCode365

Вступ до CSS Grid

CSS Grid — це інструмент layout для розміщення вмісту сторінки в рядках і колонках.

Він корисний, коли ти хочеш створювати layouts на кшталт grids карток, dashboards, sidebars, headers, footers і простих структур сторінки.

Чому CSS Grid корисний

Normal document flow складає block elements згори вниз.

Flexbox допомагає, коли потрібно розмістити елементи в одному головному напрямку: рядку або колонці.

CSS Grid допомагає, коли потрібно контролювати два напрямки одночасно: рядки й колонки.

Наприклад, сторінку з header, sidebar, main content area і footer легше описати через Grid, ніж через margins, floats або positioning.

Що таке CSS Grid

CSS Grid — це двовимірна система layout.

Це означає, що вона може контролювати:

  • колонки зліва направо
  • рядки згори вниз

Можна уявити Grid як невидиму таблицю, намальовану поверх частини сторінки. Твої HTML-елементи можуть розміщуватися всередині комірок цього layout.

Grid container і grid items

Щоб почати використовувати CSS Grid, додай display: grid до батьківського елемента.

Цей батьківський елемент стає grid container.

Його прямі дочірні елементи стають grid items.

Лише читання
<div class="grid-container">
  <div class="item">Елемент 1</div>
  <div class="item">Елемент 2</div>
</div>
Лише читання

Лише прямі дочірні елементи стають grid items. Якщо елемент вкладений глибше, він не стає grid item, якщо його власний батьківський елемент також не використовує display: grid.

Якщо ти не розміщуєш grid items вручну, браузер використовує auto-placement. Він ставить кожен grid item у наступну доступну комірку, рухаючись зліва направо й створюючи новий рядок, коли це потрібно.

Створення колонок з grid-template-columns

Властивість grid-template-columns визначає кількість і ширину колонок.

CSS Grid часто використовує одиницю fr. fr походить від "fraction" і означає частку доступного простору.

Можна редагувати
<div class="column-grid">
  <div>Один</div>
  <div>Два</div>
  <div>Три</div>
  <div>Чотири</div>
</div>

<style>
  .column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    font-family: Arial, sans-serif;
  }

  .column-grid div {
    padding: 20px;
    text-align: center;
    background-color: #dbeafe;
    border: 1px solid #2563eb;
  }
</style>

Це створює дві однакові колонки.

Ось три поширені шаблони колонок:

  • grid-template-columns: 1fr 1fr; створює дві однакові колонки.
  • grid-template-columns: 200px 1fr; створює фіксований sidebar і гнучку область контенту.
  • grid-template-columns: repeat(3, 1fr); створює три однакові колонки без повторення 1fr тричі.

Створення рядків з grid-template-rows

Рядки часто створюються автоматично, коли ти додаєш більше елементів.

Коли потрібна конкретна висота рядків, використовуй grid-template-rows.

Можна редагувати
<div class="row-grid">
  <div class="top-row">Рядок із фіксованою висотою</div>
  <div class="content-row">Автоматичний рядок, що росте з контентом</div>
</div>

<style>
  .row-grid {
    display: grid;
    grid-template-rows: 80px auto;
    gap: 12px;
    font-family: Arial, sans-serif;
  }

  .row-grid div {
    padding: 16px;
    background-color: #dcfce7;
    border: 1px solid #16a34a;
  }

  .content-row {
    min-height: 120px;
  }
</style>

Це створює два рядки:

  • перший рядок має висоту 80px
  • другий рядок росте залежно від свого контенту

Якщо не задавати grid-template-rows, Grid усе одно автоматично створює рядки, коли елементам потрібно більше простору.

Використання gap

Властивість gap створює простір між рядками й колонками grid.

Використовуй gap замість додавання margins до кожного grid item.

Можна редагувати
<div class="gap-grid">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

<style>
  .gap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    font-family: Arial, sans-serif;
  }

  .gap-grid div {
    padding: 20px;
    text-align: center;
    background-color: #fef3c7;
    border: 1px solid #d97706;
  }
</style>

Це додає 20px простору між grid items, але не навколо зовнішнього краю grid.

Простий приклад layout з Grid

Цей приклад створює невеликий layout сторінки з header, sidebar, main content area і footer.

Шапка й підвал використовують grid-column, щоб розтягнутися через обидві колонки. Ця властивість пояснюється одразу після прикладу.

Можна редагувати
<div class="page-layout">
  <header class="header">Шапка</header>
  <aside class="sidebar">Бічна панель</aside>
  <main class="main">Основний контент</main>
  <footer class="footer">Підвал</footer>
</div>

<style>
  .page-layout {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-align: center;
  }

  .header {
    grid-column: 1 / 3;
    padding: 20px;
    background-color: #dbeafe;
  }

  .sidebar {
    padding: 40px 20px;
    background-color: #dcfce7;
  }

  .main {
    padding: 40px 20px;
    background-color: #fef3c7;
  }

  .footer {
    grid-column: 1 / 3;
    padding: 20px;
    background-color: #e5e7eb;
  }
</style>

Бічна панель і основний контент не мають правил ручного розміщення. Вони автоматично стають у наступні доступні комірки grid.

Розміщення елементів через колонки

У прикладі вище header і footer розтягуються через обидві колонки.

Це відбувається тому, що вони використовують grid-column.

Лише читання

Колонки grid розділені невидимими вертикальними лініями.

У grid з двома колонками є три вертикальні лінії:

  • лінія 1 — це лівий край
  • лінія 2 розташована між двома колонками
  • лінія 3 — це правий край

Тож grid-column: 1 / 3; означає: почати на лінії 1 і закінчити на лінії 3.

Також можна побачити -1 як кінцеву лінію.

У Grid -1 означає останню лінію grid.

Можна редагувати
<div class="full-width-grid">
  <div class="wide-item">Я займаю всю ширину grid</div>
  <div>Один</div>
  <div>Два</div>
  <div>Три</div>
</div>

<style>
  .full-width-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    font-family: Arial, sans-serif;
  }

  .full-width-grid div {
    padding: 16px;
    text-align: center;
    background-color: #dbeafe;
    border: 1px solid #2563eb;
  }

  .wide-item {
    grid-column: 1 / -1;
  }
</style>

grid-column: 1 / -1; означає: почати на першій лінії grid і закінчити на останній лінії grid. Так елемент займає всю ширину grid, навіть якщо grid має більше ніж дві колонки.

Grid vs Flexbox

Grid і Flexbox — це інструменти layout, але вони корисні в різних ситуаціях.

  • Flexbox найкраще підходить для одного напрямку: рядка або колонки.
  • Grid найкраще підходить для двох напрямків: рядків і колонок разом.

Використовуй Flexbox для навігаційних посилань, кнопок toolbar і маленьких груп елементів.

Використовуй Grid для layouts сторінки, dashboards, галерей і grids карток.

Поширені помилки початківців

  • Додавати display: grid не до того елемента: додавай його до батьківського контейнера, а не до окремих елементів.
  • Очікувати, що вкладені елементи автоматично стануть grid items: лише прямі дочірні елементи grid container стають grid items.
  • Забувати gap: використовуй gap для простору між grid items замість додавання margins до кожного елемента.
  • Використовувати Grid для дуже простого вирівнювання: якщо потрібно лише центрувати один елемент або поставити іконку поруч із текстом, Flexbox може бути простішим.

Мініпрактика

Напиши CSS для grid container, який:

  • створює три однакові колонки
  • додає 16px gap між елементами

Підказка: використай repeat(3, 1fr).

Короткий тест із відповідями

  1. Яка CSS-властивість перетворює батьківський елемент на grid container?
  2. Яка CSS-властивість визначає розмір і кількість колонок?
  3. Що контролює gap?

Відповіді:

  1. display: grid
  2. grid-template-columns
  3. Простір між рядками й колонками grid.

Відповідь на мініпрактику:

Лише читання

Маленький виклик

Спробуй створити простий layout dashboard.

  1. Перетвори .dashboard на grid.
  2. Створи дві колонки: 180px 1fr.
  3. Додай 16px gap.
  4. Зроби так, щоб .top-bar займав обидві колонки.
Можна редагувати
<div class="dashboard">
  <div class="top-bar">Навігація dashboard</div>
  <div class="side-menu">Посилання меню</div>
  <div class="content-area">Основні дані dashboard</div>
</div>

<style>
  .dashboard {
    /* 1. Перетвори це на grid */

    /* 2. Створи дві колонки: 180px і 1fr */

    /* 3. Додай gap 16px */

    font-family: Arial, sans-serif;
  }

  .top-bar {
    /* 4. Зроби так, щоб це займало обидві колонки */

    padding: 16px;
    color: white;
    background-color: #1f2937;
  }

  .side-menu {
    padding: 20px;
    background-color: #dbeafe;
  }

  .content-area {
    padding: 20px;
    background-color: #fef3c7;
  }
</style>

Одна можлива відповідь:

Лише читання

Підсумок

  • CSS Grid створює layouts з рядками й колонками.
  • Батьківський елемент з display: grid є grid container.
  • Прямі дочірні елементи grid container є grid items.
  • grid-template-columns визначає колонки.
  • grid-template-rows визначає рядки.
  • fr ділить доступний простір на гнучкі частини.
  • gap контролює простір між рядками й колонками.
  • Grid корисний для layouts сторінки, dashboards, галерей і grids карток.