Lesson4

Урок 4: CSS Grid – Наводимо Порядок, Як у Бабусі на Городі!

Огляд

Привіт, майстре веб-дизайну! 🧐 Якщо Flexbox був як обід на подвір’ї, де всі сидять, де заманеться, то CSS Grid — це справжній прийом у бабусі. Уяви, що ти готуєш застілля: тут у нас столи, стільці, миска з варениками, огірочки на закуску—і все це розставлене з ювелірною точністю, щоб кожен гість відчував себе, як удома.

Після цієї лекції ти зможеш створювати складні макети, наче розставляєш вареники в макітрі — кожен елемент буде на своєму місці. Готовий стати майстром CSS Grid? Хапай кухоль чаю і поїхали!

Крок 1: Налаштуй і Запусти з Caddy – Ласкаво Просимо!

Перш ніж розставляти стільці та столи, переконаймося, що наша зала відкрита. Скористаємося Caddy, щоб запустити наш проект. Відкрий термінал і переходь до папки проекту:

cd ~/Documents/my-css-project

Запускай свій проект за допомогою Caddy:

caddy file-server --listen :8080

Тепер твоя сторінка доступна за адресою http://localhost:8080. Відкрий її в браузері і готуйся вітати гостей на CSS Grid-застіллі!

Важлива Підказка: Зміни в CSS не видно?

Якщо ти зробив зміни у файлі CSS, але вони не з’являються на сторінці, браузер може використовувати стару версію з кешу. Щоб це виправити, виконай жорстке оновлення:

На Windows/Linux: CTRL + F5 або CTRL + SHIFT + R
На Mac: CMD + SHIFT + R

Це перезавантажить сторінку без використання кешу. Тепер твоя таблиця повинна виглядати саме так, як ти її задумав!

Крок 2: Створюємо Контейнер Grid – Скатерти-Самобранки!

Щоб використовувати CSS Grid, потрібно додати display: grid; до елемента-контейнера. Уяви, що це як стелити скатертину—тут будуть стояти всі твої страви, гості та навіть кіт, якщо він прийде.

Налаштування HTML

Давай підготуємо наш стіл для гостей (HTML) і розставимо запрошених:

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Застілля з CSS Grid</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="grid-container">
        <div class="item">Чайник</div>
        <div class="item">Чашка 1</div>
        <div class="item">Чашка 2</div>
        <div class="item">Цукорниця</div>
        <div class="item">Молочник</div>
        <div class="item">Печиво</div>
    </div>
</body>
</html>

А тепер розкладемо наші частування у файлі styles.css:

`styles.css`

body {
    font-family: 'Georgia', serif;
}

.grid-container {
    display: grid; /* Готово! Зал розкладений, як у бабусі на свято! */
    grid-template-columns: auto auto auto; /* Три колонки — ідеально для чаювання! */
    gap: 20px; /* Трішки простору між чашками, щоб ніхто не пролив. */
    padding: 20px;
    background-color: #f5f5f5; /* Підлога чиста і сяє. */
}

.item {
    padding: 20px;
    background-color: #ddd;
    border: 2px solid #ccc;
    text-align: center;
    font-weight: bold;
}

Збережи файли та онови сторінку за http://localhost:8080. Ось тобі гарненький банкет, елементи стоять рівненько, як кришечки на полицях.

Крок 3: Розставляємо елементи – Як Гостей на Святковому Столі

Справжня магія CSS Grid полягає в тому, що ти можеш точно сказати, де кожен елемент має стояти. Ти можеш організувати ряди та колонки, як посадкову схему на весіллі. А якщо хтось захоче сидіти біля самого пирога, Grid зробить так, щоб все було по правилам.

Почнемо з цього налаштування в нашому grid-container:

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* Центральна колонка ширша — ідеально для чайника! */
    grid-template-rows: auto auto; /* Дві рядочки для балансу. */
}

Тепер призначимо кожному гостю його почесне місце:

.item:nth-child(1) {
    grid-column: 2 / 3; /* Чайник, як завжди, в центрі уваги! */
    grid-row: 1 / 3; /* І займає обидва ряди — VIP-гость! */
}

.item:nth-child(2) {
    grid-column: 1 / 2; /* Чашка 1 ліворуч. */
}

.item:nth-child(3) {
    grid-column: 3 / 4; /* Чашка 2 праворуч. Все симетрично! */
}

З кількома змінами ти перетворив просту сітку на справжній святковий стіл.

Крок 4: Налаштування Рядів і Колонок – Кожен Гість на Своєму Місці

CSS Grid дозволяє тобі окремо налаштовувати ряди та колонки, як обирати місце для всіх на пікніку. Давай зробимо так, щоб цукорниця займала дві колонки, бо всі знають, що без цукру — нікуди.

Нехай Цукорниця сяє

.item:nth-child(4) {
    grid-column: 1 / 3; /* Охоплює дві колонки, як справжня зірка. */
    background-color: #ffeeba; /* Додамо золотистого блиску. */
}

Тепер цукорниця — головна зірка столу, але не хвилюйся, молочник щасливий у своєму кутку.

Висновок

Молодець, майстре застілля! 🥂 Тепер твої елементи розставлені і виглядають так, наче до тебе в гості приїхала вся родина з села. У наступному уроці ми поговоримо про media queries—подумаємо, як переставити стільці, якщо прийдуть ще гості з іншими екранами.

До зустрічі в наступному уроці, а поки що насолоджуйся своїм ідеально організованим святковим столом!