Модуль 14

CSS Grid: двовимірні сітки

Ось готовий урок, створений спеціально за твоїм майстер-промптом. Вмикаймо уяву, ніби ми в аудиторії Сандерс Театру!

🎓 УРОК: CSS Grid — Володар Двовимірного Простору

Вітаю, колеги! 👋

Сьогодні ми не просто вивчаємо чергову властивість CSS. Сьогодні ми змінюємо спосіб вашого мислення про простір на веб-сторінці. Ми поговоримо про CSS Grid.

1. 🔥 Вступ: Коли Flexbox здається

Уявіть, що ви — головний редактор газети. Вам потрібно зверстати першу шпальту: заголовок на всю ширину, зліва — колонка новин, праворуч — велика фотографія, а під нею — ще дві статті та курс валют.

Якщо ви спробуєте зробити це за допомогою Flexbox (який ми вже знаємо), ви відчуєте біль. Чому? Бо Flexbox — це одномірний інструмент. Це як нитка, на яку ми нанизуємо намистини. Ви можете розташувати елементи в рядок АБО в стовпчик. Але не одночасно.

Щоб зробити складний макет на флексах, вам доведеться вкладати div у div, створювати контейнери для контейнерів... Це перетворюється на "пекло вкладеності" (div soup).

Питання до вас: Чи не здається вам дивним, що у 21 столітті, щоб поставити квадрат у правий нижній кут, нам доводиться танцювати з бубном навколо margin і position?

Аналогія: * Flexbox — це черга в магазині. Люди стоять один за одним. Ви можете сказати їм "посуньтеся вліво" або "розійдіться", але це все ще лінія. * CSS Grid — це шахова дошка або таблиця Excel. Ви можете поставити фігуру в будь-яку клітинку: "Ти йди в ряд 2, стовпчик 3". Ви керуєте двома вимірами одночасно: горизонталлю і вертикаллю.

Без Grid сучасний складний веб-дизайн — це спроба побудувати хмарочос із соломи. З Grid — ви отримуєте сталевий каркас.

2. 🧠 Теоретична база (Що там "під капотом"?)

Grid працює за принципом "Спочатку розкресли, потім поклади". На відміну від Flexbox, де розмір контенту часто диктує ширину, у Grid ви — архітектор. Ви малюєте сітку, а контент просто займає підготовлені місця.

Ключові поняття (Це база 🏗️)

  1. Grid Container: Батьківський елемент, якому ми кажемо display: grid. Це наш "будівельний майданчик".
  2. Grid Tracks (Доріжки): Це ваші стовпці (columns) та рядки (rows).
  3. Grid Gap (Проміжки): Відстань між клітинками (як шви між плиткою).

Магія одиниці fr

Забудьте про пікселі та відсотки на хвилину. У Grid є суперсила — одиниця fr (fraction — частка).

Уявіть, що у вас є торт. * 1fr 1fr — ріжемо торт навпіл (дві рівні частини). * 2fr 1fr — одному дістається дві частини, іншому одна (2/3 і 1/3).

Чому це круто? fr автоматично вираховує вільний простір після того, як відмальовано всі елементи з фіксованим розміром. Вам не треба брати калькулятор і ділити 100% на 3.

Що потрібно запам'ятати (Синтаксис):

.container {
  display: grid;
  /* Робимо 3 стовпці: 200px, автоматичний, і 1 частку вільного місця */
  grid-template-columns: 200px auto 1fr;
  /* Робимо 2 рядки по 100px */
  grid-template-rows: 100px 100px;
  /* Відступи між клітинками */
  gap: 20px;
}

3. 🧪 Приклади (Від простого до магії)

Приклад 1: Базова сітка 2x2

Давайте створимо просте вікно з чотирьох квадратів.

Як ви думаєте, що станеться, якщо ми напишемо grid-template-columns: 1fr 1fr?

<div class="grid-box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

<style>
.grid-box {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Два рівні стовпці */
  gap: 10px;
}
.item { background: #ddd; padding: 20px; }
</style>

Результат: Елементи 1 і 2 стануть у перший рядок, 3 і 4 — у другий. Браузер сам зрозумів, що треба перенести решту вниз (створив "неявні" рядки).

Приклад 2: "Святий Грааль" верстки (Layout)

Це те, заради чого ми тут. Класичний сайт: Хедер, Сайдбар, Контент, Футер.

Раніше це було боляче. Тепер дивіться на властивість grid-template-areas. Це ж просто візуальне мистецтво в коді!

.site {
  display: grid;
  height: 100vh;
  /* Визначаємо імена областей */
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";

  /* Налаштовуємо розміри: сайдбар 200px, контент - все інше */
  grid-template-columns: 200px 1fr;
  /* Хедер і футер фіксовані, середина гумова */
  grid-template-rows: auto 1fr auto;
}

/* Прив'язуємо елементи до імен */
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Пояснення: Ви бачите? Ми буквально намалювали сайт у коді словами. Якщо ми захочемо перемістити сайдбар праворуч, ми просто змінимо рядок на "content sidebar". Це неймовірна гнучкість.

Приклад 3: Адаптив без медіа-запитів (Магія auto-fit)

Запитання: Як зробити галерею товарів, де кількість карток у рядку змінюється залежно від ширини екрана, але без жодного @media?

.gallery {
  display: grid;
  /* Читається як: повторюй стільки разів, скільки влізе (auto-fit),
     але нехай колонка буде мінімум 200px, а максимум 1fr */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

Що відбувається: 1. На великому екрані стане, наприклад, 5 карток. 2. Звужуєте вікно — стає 4, потім 3, 2... 3. І вони завжди розтягуються на всю ширину (1fr). Це найпотужніший рядок коду в сучасному CSS.

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

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

Завдання 1 (Розігрів): Створіть контейнер з 6 елементами div. Зробіть так, щоб це була сітка: 3 стовпці рівної ширини.

Завдання 2 (Математика): Змініть попередню сітку. Перший стовпець має бути 200px, другий 1fr, третій 3fr. Змініть розмір вікна браузера. Який стовпець "з'їдає" вільне місце швидше? Чому?

Завдання 3 (Дебаггінг): У вас є код: grid-template-columns: repeat(3, 1fr). Але у вас 5 елементів. Де опиняться 4-й та 5-й елементи? Як зробити так, щоб рядок, у який вони потраплять, був висотою рівно 50px? (Підказка: гугліть grid-auto-rows).

Завдання 4 (Реальний кейс): Зробіть картку профілю як в Instagram. * Зліва: аватарка (кругла). * Справа зверху: Ім'я користувача. * Справа знизу: Опис/Біо. Використайте Grid всередині самої картки, щоб вирівняти аватар по центру вертикально відносно тексту справа.

Завдання 5 (А що, якщо...): А що, якщо один елемент має займати два стовпці? Спробуйте використати властивість grid-column: span 2 на першому елементі вашої сітки. Що сталося з іншими?

Завдання 6 (Міні-кейс "Мондріан"): Погугліть картини Піта Мондріана (прямокутники різних кольорів і розмірів). Створіть спрощену версію такої картини, використовуючи Grid, grid-column (start/end) та grid-row. Відчуйте себе художником! 🎨

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

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

  1. Не використовуйте Grid для всього. Якщо вам просто треба поставити іконку поруч із текстом — беріть Flexbox. Grid — це "важка артилерія" для макета сторінки або складних компонентів. Flex — для однієї лінії, Grid — для двох вимірів.

  2. DevTools — ваш найкращий друг. У Chrome чи Firefox (особливо Firefox!) натисніть F12, знайдіть елемент з grid і натисніть на значок grid поруч із ним. Браузер намалює вам лінії сітки прямо на сторінці. Ніколи не пишіть CSS наосліп! Дивіться на лінії.

  3. Помилка новачків: Намагатися вирівнювати контент всередині клітинки Гріда за допомогою margin або padding. Пам'ятайте: клітинка Гріда сама може стати Flex-контейнером! display: grid для батька, display: flex для дитини (щоб відцентрувати текст всередині квадрата). Комбінуйте їх!

6. 🧩 Підсумок

Ну що, як відчуття? 🤯

Ми сьогодні: * ✅ Зрозуміли, що Grid — це про 2D (рядки + стовпці). * ✅ Навчилися ділити "пиріг" екрану за допомогою fr. * ✅ Побачили, як малювати сайти "словами" через template-areas. * ✅ Зробили магічний адаптив в один рядок.

Тепер ви можете взяти будь-який складний журнальний макет і сказати: "Пф-ф, потримайте моє пиво, я зроблю це на Grid за 10 хвилин".

Що далі? Ви вже вмієте будувати структуру. Але як зробити так, щоб ваш сайт виглядав гарно не тільки на комп'ютері, а й на телефоні, коли структура має кардинально змінитися? Наступного разу ми зануримося в Media Queries та філософію Mobile First.

А поки що — практикуйтесь. Це був CS50... тобто, наш урок з CSS Grid. Побачимось! 👋

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