Модуль 15

Grid vs Flexbox: коли що використовувати

Ось урок, створений спеціально за твоїм майстер-промптом. Вмикай уяву, ми починаємо!

🎓 Урок: Grid vs Flexbox: Битва Титанів (і як їх подружити)

Привіт усім! Це CS50 (умовно 😉), і сьогодні ми розберемо одну з найбільших дилем фронтенд-розробки.

1. 🔥 Вступ: Хаос проти Порядку

Уявіть, що ви переїжджаєте в нову квартиру. У вас є купа коробок (це ваші HTML-елементи), і їх треба розставити в кімнаті (це ваш body або контейнер).

До появи сучасних інструментів, розробники поводилися як люди, які просто скидають коробки на купу в кутку, підпираючи їх милицями (float, tables, position: absolute). Якщо ви хотіли посунути одну коробку, падала вся гора. Це був жах.

Потім з'явився Flexbox. Це як розумна полиця: ви ставите книги, і вони самі посуваються, займаючи вільне місце. Але потім з'явився Grid. Це вже не просто полиця, це — креслення архітектора. Ви спочатку малюєте сітку на підлозі, а потім просто кидаєте речі в потрібні квадрати.

Питання до вас: Ви коли-небудь намагалися вирівняти кнопку ідеально по центру екрана і витрачали на це 20 хвилин? Якщо так, то ви знаєте біль.

Сьогодні ми раз і назавжди зрозуміємо: коли нам потрібна "розумна черга" (Flexbox), а коли — "архітектурна сітка" (Grid). І чому без них ви не побудуєте жоден сучасний інтерфейс.

2. 🧠 Теоретична база: Осі проти Площини

Давайте заглянемо "під капот", але без нудної документації.

Flexbox (Flexible Box) — Це про ОДИН вимір (1D)

Уявіть намисто з перлин. Ви можете нанизати перлини на нитку. * Нитка може йти зліва направо (рядок). * Або зверху вниз (колонка). * Але не одночасно!

Головна логіка: Flexbox каже елементам: "Хлопці, станьте в ряд і, якщо місця мало, потісніться або перенесіться на наступний рядок". Він ідеальний для вирівнювання контенту. Це Content-First підхід (форма залежить від вмісту).

Grid (CSS Grid Layout) — Це про ДВА виміри (2D)

Уявіть таблицю в Excel або шахову дошку. У вас є рядки І колонки одночасно. Ви можете сказати: "Ти, елемент А, займи клітинку в 2-му рядку і 3-й колонці".

Головна логіка: Grid каже: "Ось жорстка сітка. Елементи, залізайте в свої комірки". Це Layout-First підхід (вміст підлаштовується під форму).

🔑 Що треба запам'ятати (Mental Model):

  1. Flexbox — це потік. Як вода в трубі або люди в черзі.
  2. Grid — це каркас. Як розмітка фундаменту будинку.

3. 🧪 Приклади (Кодимо разом)

Приклад №1: Навігаційне меню (Flexbox)

Ситуація: У нас є логотип, посилання "Про нас", "Контакти" і кнопка "Вхід". Вони йдуть в один рядок.

Очікування: Як ви думаєте, що буде, якщо ми використаємо Grid? Ми б могли, але це зайве ускладнення. Нам просто треба розкидати елементи вліво і вправо.

.navbar {
  display: flex;             /* Вмикаємо магію */
  justify-content: space-between; /* Лого зліва, логін справа, решта посередині */
  align-items: center;       /* Все рівненько по вертикалі */
}

Пояснення: Flexbox ідеально підходить тут, бо нам байдуже на чіткі колонки. Нам важливо, щоб елементи "розтікалися" по ширині.

Приклад №2: Галерея зображень (Grid)

Ситуація: У нас є 10 фотографій. Ми хочемо, щоб вони були в 3 колонки, з рівними відступами.

Очікування: Якщо робити це на Flexbox, нам доведеться рахувати ширину у відсотках (33.3%), морочитися з margin...

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 рівні колонки */
  gap: 20px; /* Відступи між фото - найзручніша річ у світі! */
}

Пояснення: Grid тут король. Ми задали структуру (3 колонки), і контент сам туди "впав". 1fr означає "одна частка вільного простору".

Приклад №3: Реальний світ — Комбінація (Flex у Grid)

Увага, це найважливіший момент уроку. У реальному проєкті (наприклад, картка товару в інтернет-магазині) ви будете використовувати обидва.

  1. Сітка товарів на сторінці — це Grid (щоб все було рівно).
  2. Вміст самої картки (ціна зліва, кнопка "Купити" справа) — це Flex.
/* Зовнішня сітка */
.shop-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

/* Внутрішня картка */
.product-card-footer {
  display: flex;
  justify-content: space-between; /* Розводимо ціну і кнопку по краях */
}

4. 🛠 Практична частина

Час забруднити руки кодом! Відкрийте редактор (або CodePen) і спробуйте:

Завдання 1: "Центрування всього життя" Створіть div з класом .box всередині .container. Зробіть так, щоб .box був ідеально по центру екрана, використовуючи Flexbox (лише 3 рядки CSS).

Завдання 2: "Шахівниця" Створіть контейнер з 9-ма div-ами всередині. Використовуючи Grid, зробіть сітку 3x3.

Завдання 3: "Адаптивність без медіа-запитів" Візьміть код із Прикладу №3 (auto-fit). Змінюйте розмір вікна браузера. Питання: Чому картки перескакують на новий рядок самі, хоча ми не писали @media? (Підказка: магія функції minmax).

Завдання 4: "Поломка" Спробуйте використати justify-content: space-between у Grid контейнері. Чому воно працює не так, як у Flexbox? (Це навчить вас розрізняти вирівнювання треків і вирівнювання контенту).

Завдання 5: Міні-кейс "Сайт-блог" Намалюйте структуру: * Header (на всю ширину) * Sidebar (збоку, фіксована ширина 200px) * Main Content (займає решту місця) * Footer (на всю ширину) * Підказка: Використайте Grid (grid-template-areas — це суперсила для таких задач).

5. 💡 Мислення як у розробника

Як досвідчений Senior розробник дивиться на макет дизайнера?

  1. Сканування: Він не дивиться на кольори. Він шукає прямокутники.
  2. Аналіз:
    • "Це просто список елементів в один ряд?" -> Flexbox.
    • "Це складна структура, де елементи перекриваються або мають чіткі координати?" -> Grid.
    • "Це список карток?" -> Grid для списку, Flex для нутрощів картки.

Типові помилки новачків: * ❌ Намагатися зробити всю сторінку одним великим Flexbox-ом (це призведе до пекла з вкладеностями). * ❌ Використовувати Grid для простого вирівнювання іконки біля тексту (це стріляти з гармати по горобцях). * ❌ Забувати про властивість gap. Раніше ми мучилися з margin-right: 20px, а для останнього елемента знімали марджин. gap працює і там, і там. Користуйтеся ним!

6. 🧩 Підсумок

Отже, що ми маємо в сухому залишку:

  • Flexbox — це ваш інструмент для 1D (рядки АБО колонки). Ідеально для меню, кнопок, вирівнювання дрібниць.
  • Grid — це ваш інструмент для 2D (весь макет, галереї). Ідеально для каркаса сторінки.
  • Справжня магія стається, коли ви їх комбінуєте.

Що ви тепер вмієте: Ви більше не боїтеся макетів. Ви можете подивитися на будь-який сайт (навіть Facebook чи YouTube) і в голові розкреслити: "Ага, тут грід, а ось всередині цієї кнопки — флекс".

👉 У наступній серії: Ми зробили гарну сітку, але як зробити так, щоб на мобільному телефоні 3 колонки перетворювалися на одну? Ми поговоримо про Responsive Design та Media Queries. Готуйте свої смартфони!

А поки що — практикуйтеся. Побачимось на наступному уроці! 🚀

← До списку уроків Наступний урок →