Lesson4

Урок 4: CSS Grid — Порядок на Странице, Как в Советском Бюрократическом Офисе!

Обзор

Приветствую, товарищ верстальщик! 🧐 Если Flexbox — это строй солдат на параде, то 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="ru">
<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-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; /* Занимает оба ряда — уважаемый гость! */
}

.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 — подумаем, как изменить план, если придут делегации с разных устройств.

До встречи на следующем уроке, а пока наслаждайся своим безупречным, организованным макетом! 😎