🔲 CSS Grid

Map of Content для CSS Grid: двумерная раскладка, области, шаблоны, именованные линии и сложные макеты.

---

📑 Оглавление

• Зачем нужно
• Путь обучения
• Связанные домены
• Навигация

---

Зачем нужно

CSS Grid -- первая настоящая система двумерной раскладки в CSS. Если Flexbox решает задачи в одном направлении, то Grid управляет строками и колонками одновременно. Это идеальный инструмент для страничных макетов, дашбордов и любых сложных интерфейсов.

↑ к оглавлению

---

🗺 Путь обучения

🟢 Начинающий

Концепции

• Основы Grid
• Grid-контейнер и grid-элементы
• Строки, колонки и ячейки
• Grid-линии и grid-области
• display grid и inline-grid

Определение сетки

• Grid template
• Единица fr -- дробные доли
• repeat() -- повторение треков
• minmax() -- границы размеров
• auto-fill и auto-fit

🟡 Средний

Размещение элементов

• grid-column и grid-row
• grid-area -- сокращённое свойство
• grid-template-areas -- именованные области
• Явная и неявная сетка
• grid-auto-rows и grid-auto-columns
• grid-auto-flow -- направление заполнения

Отступы и выравнивание

• gap (grid-gap) -- отступы между ячейками
• justify-items и align-items
• justify-content -- выравнивание по главной оси
• justify-self и align-self
• place-items и place-content

Адаптивный Grid

• Responsive Grid без media queries
• Grid и media queries
• Grid -- паттерн auto-fill + minmax

🔴 Продвинутый

Продвинутые техники

• Subgrid
• Именованные grid-линии
• Grid и aspect-ratio
• Наложение элементов в Grid
• Grid -- анимация

Практические макеты

• Grid -- макет страницы (page layout)
• Grid -- дашборд
• Grid -- галерея изображений
• Grid -- карточная сетка
• Grid -- Holy Grail Layout

Сравнение

• Flexbox vs Grid
• Grid -- распространённые ошибки
• Grid -- доступность и порядок элементов

↑ к оглавлению

---

🔗 Связанные домены

Домен	Связь
_MOC CSS	Родительский домен
_MOC Flexbox	Альтернативная система раскладки
_MOC HTML	Структура для Grid-раскладки
_MOC Рецепты	Готовые Grid-решения

↑ к оглавлению

---

🧭 Навигация

⬆ Родительский MOC	_MOC CSS
⬆ К главной	🗺️ MOC

📑 Быстрое оглавление

• Зачем нужно
• Путь обучения
• Связанные домены