Урок 30. Задания: Когда что использовать + мини-проект 4

📁 Раздел: CSS Grid ⏱️ Время изучения: ~80 мин 🎯 Сложность: Средняя
#display #grid-template-areas #grid-template-columns #grid-area #minmax #gap #justify-content #align-items

⚡ Кратко

Сначала выбери инструмент (Grid или Flex), потом собери макет. Каждое задание — с ожидаемым визуальным результатом.

Задания

Задание 1. Выбери инструмент (без кода)

Для каждого блока запиши: Grid или Flexbox и почему (2D или 1D).

  1. Каркас страницы: шапка, две колонки, подвал.
  2. Горизонтальное меню из 5 ссылок в одну строку.
  3. Галерея из 12 карточек, которая сама переносится по ширине.
  4. Кнопки «Отмена» и «Сохранить», прижатые к разным краям.
Подсказка: спрашивай «нужно ли управлять и строками, и колонками сразу?». Да → Grid, нет → Flex.

Задание 2. Holy-grail на grid-template-areas

Собери макет: header и footer во всю ширину, между ними ряд nav · main · aside. Ожидаемый результат:

header nav main aside footer
Целевой результат задания 2.

Задание 3. Адаптивная сетка карточек

Сделай галерею из 6 карточек на grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)). При сужении окна колонок становится меньше, карточки не уже 180px. Проверь, перетаскивая край окна.

Задание 4. Flex внутри ячейки + переключение на мобильном

Внутри main сделай шапку карточки «иконка + заголовок + кнопка» на Flexbox. Затем добавь media-правило: на узком экране области holy-grail выстраиваются одной колонкой.

Задание 5. Объясни выбор и проверь в DevTools

  1. Включи Grid overlay и назови строки, колонки, gap и область любого элемента.
  2. Объясни одним предложением, почему каркас на Grid, а ряд кнопок — на Flex.

Навигация