Урок 26. Обзор урока: Введение в CSS Grid

📁 Раздел: CSS Grid ⏱️ Время изучения: ~60 мин 🎯 Сложность: Средняя
#display #grid-template-columns #grid-template-rows #gap

⚡ Кратко

CSS Grid делает контейнер двумерной сеткой — строки и колонки сразу. Включается одной строкой display: grid; колонки задаёт grid-template-columns, доли — единица fr, зазоры — gap. Это главный инструмент макетов, в отличие от одномерного Flexbox.

О чём урок

CSS Grid создаёт двумерную сетку: строки и колонки одновременно. Это основной инструмент для layout, где важны и ширина, и высота областей. В этом вводном уроке разберём, как включить сетку, задать колонки и строки, что такое единица fr и чем Grid отличается от Flexbox.

Flexbox — 1D одна линия Grid — 2D строки × колонки
Flexbox раскладывает по одной оси, Grid — сразу по строкам и колонкам.

Ключевые понятия

  • display: grid — включает двумерную сетку на контейнере.
  • grid-template-columns — число и ширины колонок.
  • grid-template-rows — число и высоты строк.
  • fr — доля свободного места между треками.
  • repeat() — сокращение для повторяющихся треков.
  • gap — зазор между ячейками.

Структура урока

Теория

Модель Grid и ключевые понятия.

Справочник

Свойства урока с назначением.

Примеры

Рабочие CSS Grid-фрагменты.

Старый vs Новый

Сравнение со старыми layout-приёмами.

Задания

Самостоятельная практика.

Решения

Проверочные ответы.

Ошибки

Частые проблемы Grid.

Домашнее задание

Практическая работа.

Ресурсы

Документация и повторение.

Навигация