Урок 27. Обзор урока: Строки, колонки и grid-template
⚡ Кратко
Учимся точно задавать треки сетки: grid-template-columns/rows, repeat(), minmax(),
fr, адаптив через auto-fit, и размещение ячеек по линиям через span.
О чём урок
В уроке 26 мы включили display: grid. Здесь идём дальше — детально управляем строками и колонками:
задаём ширины треков через fr, сокращаем повторы через repeat(), делаем треки гибкими через
minmax(), собираем адаптивную сетку без media queries через repeat(auto-fit, minmax(...))
и размещаем крупные плитки по нескольким трекам через grid-column/grid-row и span.
Зачем: это основной инструмент для галерей карточек, дашбордов и страничных раскладок.
Ключевые понятия
grid-template-columns/grid-template-rows— список треков.fr— доля свободного места.repeat(n, …)— повтор треков.minmax(min, max)— гибкий размер трека.auto-fit/auto-fill— адаптив без media queries.grid-column/grid-row/span— размещение по линиям.gap— зазор между треками.
Структура урока
Теория
Модель Grid и ключевые понятия.
Справочник
Свойства урока с назначением.
Примеры
Рабочие CSS Grid-фрагменты.
Старый vs Новый
Сравнение со старыми layout-приёмами.
Задания
Самостоятельная практика.
Решения
Проверочные ответы.
Ошибки
Частые проблемы Grid.
Домашнее задание
Практическая работа.
Ресурсы
Документация и повторение.