CSS Grid

CSS Grid — японський дзен-сад поділений на секції доріжками як сітка

У попередніх уроках ми вивчили Flexbox — він ідеальний для одновимірних розкладок (рядок або стовпець). Але що робити, коли потрібна двовимірна сітка — рядки та стовпці одночасно? Зустрічай CSS Grid.

Flexbox vs Grid

Основи Grid

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px; /* 3 стовпці по 200px */
  grid-template-rows: 100px 100px;          /* 2 рядки по 100px */
  gap: 16px;                                /* проміжки */
}

CSS Grid: сітка 3 x 2 з gap

Елементи автоматично розміщуються в клітинки зліва направо, зверху вниз.

fr — гнучкі одиниці

fr (fraction) — частка вільного простору. Працює як flex-grow:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;    /* 3 рівні стовпці */
  grid-template-columns: 1fr 2fr 1fr;    /* середній вдвічі ширший */
  grid-template-columns: 250px 1fr;      /* sidebar 250px + контент */
  grid-template-columns: 1fr 3fr;        /* 25% / 75% */
}

repeat() — скорочення

Замість повторень:

/* Без repeat — повторення */
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;

/* З repeat — компактно */
grid-template-columns: repeat(6, 1fr);       /* 6 рівних стовпців */
grid-template-columns: repeat(3, 200px);     /* 3 стовпці по 200px */
grid-template-columns: repeat(4, 1fr 2fr);   /* патерн: 1fr 2fr × 4 */

minmax() — мінімум та максимум

Задає діапазон розміру:

grid-template-columns: repeat(3, minmax(200px, 1fr));
/* Кожен стовпець: мінімум 200px, максимум — рівна частка */

auto-fill та auto-fit

Для responsive сіток без media queries:

/* auto-fill — створює стільки стовпців, скільки вміщується */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

/* auto-fit — те саме, але розтягує існуючі елементи */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

Різниця проявляється, коли елементів менше, ніж стовпців:

auto-fill vs auto-fit: різниця з 2 елементами

gap — проміжки

Працює так само, як у Flexbox:

.container {
  display: grid;
  gap: 16px;         /* однакові проміжки */
  gap: 20px 16px;    /* row-gap column-gap */
  row-gap: 20px;     /* тільки між рядками */
  column-gap: 16px;  /* тільки між стовпцями */
}

Розміщення елементів у сітці

Елемент може займати кілька клітинок:

.header {
  grid-column: 1 / 3;  /* від лінії 1 до лінії 3 (2 стовпці) */
  grid-row: 1 / 2;     /* один рядок */
}

/* Скорочення через span */
.wide {
  grid-column: span 2;  /* займає 2 стовпці */
}
.tall {
  grid-row: span 3;     /* займає 3 рядки */
}

Лінії сітки (3 стовпці):
1     2     3     4
│─────│─────│─────│

Grid Areas — іменовані зони

Найінтуїтивніший спосіб створити розкладку:

.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 50px;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer  { grid-area: footer; }

Grid Template Areas: header, sidebar, content, footer

Практика: responsive галерея

<div class="gallery">
  <div class="photo">1</div>
  <div class="photo">2</div>
  <div class="photo">3</div>
  <div class="photo">4</div>
  <div class="photo">5</div>
  <div class="photo">6</div>
</div>

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

.photo {
  aspect-ratio: 1;          /* квадратні */
  background: #e2e8f0;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;       /* Grid + Flexbox разом! */
  font-size: 2rem;
  color: #718096;
}

На широкому екрані — 3 стовпці, на вужчому — 2, на мобільному — 1. Без жодного media query.

Підсумок

• display: grid — створює grid-контейнер
• grid-template-columns — визначає стовпці (200px, 1fr, repeat())
• fr — гнучка одиниця (частка вільного простору)
• repeat(auto-fit, minmax(250px, 1fr)) — responsive сітка в один рядок
• grid-column: span 2 — елемент на 2 стовпці
• grid-template-areas — іменовані зони для читабельних розкладок
• Grid + Flexbox — Grid для загальної сітки, Flexbox для вирівнювання всередині

Що далі?

У наступному уроці вивчимо Responsive Design — media queries, mobile-first підхід, CSS transitions та animations.