Урок 29. Задания: Flexbox vs Grid: сравнение

📁 Раздел: CSS Grid ⏱️ Время изучения: ~55 мин 🎯 Сложность: Средняя

⚡ Кратко

Для каждой задачи сначала реши: это одна линия (Flexbox) или сетка строк и колонок (Grid)? Затем верстай.

Задания

  1. Навбар (Flexbox). Сверстай шапку: логотип слева, три пункта меню справа в один ряд. Ожидаемый результат — как в примере 1 из «Примеров».
  2. Галерея (Grid). Сделай сетку из 6 карточек в 3 колонки с равными промежутками. Карточки должны выстроиться в 2 ровные строки.
  3. Одна задача — два способа. Возьми ряд из трёх блоков и собери его сначала на Flexbox, потом на Grid. Запиши, какой способ уместнее и почему.
  4. Каркас + компонент. Сделай макет «сайдбар + контент» на Grid, а шапку внутри — на Flexbox (логотип и меню по краям).
  5. DevTools. Включи overlay (бейдж flex/grid) и назови: для Grid — линии, треки, gap; для Flexbox — главную и поперечную оси.
  6. Аргументация. Для каждой своей раскладки одним предложением объясни выбор инструмента через размерность задачи (1D или 2D).
Критерий готовности: в каждой раскладке используешь gap вместо margin между элементами, и можешь обосновать выбор Flexbox/Grid размерностью.

Навигация