Урок 09. CSS Grid в утилитах
⚡ Кратко
grid включает сетку, grid-cols-3 задаёт три равные
колонки, gap-6 — промежутки. Элемент занимает несколько колонок
через col-span-2. Адаптивность — приставками:
grid-cols-1 md:grid-cols-2 lg:grid-cols-4.
О чём этот урок
Grid отвечает за двумерные раскладки: сетки карточек, каркас страницы, сложные блоки с «широкими» элементами. Разберём колонки и строки, объединение ячеек, автоматические сетки без медиазапросов, именованные области и то, как выбрать между grid и flex.
Структура урока
Теория
Колонки, строки, объединение ячеек, авто-сетки.
Справочник
Все grid-классы одной таблицей.
Примеры
Сетка карточек, дашборд, галерея, каркас страницы.
Старый vs Новый
Сетка на float и процентах против grid.
Задания
Собрать адаптивную сетку и дашборд.
Решения
Готовые раскладки с разбором.
Ошибки
Grid ради одной оси, переполнение, забытые брейкпоинты.
Домашнее задание
Страница со статистикой.
Ресурсы
Документация по grid.
Практика
- Сделайте сетку карточек 1 → 2 → 4 колонки по мере роста экрана.
- Сделайте первую карточку вдвое шире остальных.
- Соберите сетку, которая сама подбирает число колонок под ширину.