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

Задача: сверстай простую страницу-«дашборд» так, чтобы общий каркас держал Grid (2D), а содержимое шапки и сайдбара — Flexbox (1D). Для каждого блока письменно обоснуй выбор инструмента через размерность задачи.

Ожидаемый результат

DashboardПрофиль

Карточка 1

Карточка 2

Карточка 3

Карточка 4

/* lesson-29/homework.css */
.page {                              /* каркас — Grid (2D) */
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: .6rem;
}
.page > header { grid-column: 1 / -1; }

Каркас (Grid)

Контейнер .page — display: grid, две колонки (сайдбар + контент). Шапку растяни на обе колонки через grid-column: 1 / -1.

Шапка (Flexbox)

Внутри header — display: flex с justify-content: space-between: название слева, действие справа. Это одна линия → Flexbox.

Сайдбар (Flexbox-колонка)

Пункты меню в столбик: display: flex; flex-direction: column; gap. Одна ось (вертикаль) → Flexbox.

Сетка карточек (Grid)

Внутри main — карточки строками и колонками: display: grid; grid-template-columns: repeat(2, 1fr). Двумерная задача → Grid.

Проверка

Открой DevTools, включи overlay для каждого контейнера. Убедись: каркас и карточки — grid, шапка и сайдбар — flex. Везде промежутки заданы через gap, а не margin.

Критерий зачёта: 4 контейнера используют правильный инструмент по размерности задачи, и для каждого есть одно предложение-обоснование (1D → Flexbox, 2D → Grid).

Урок 29. Домашнее задание: Flexbox vs Grid: сравнение

⚡ Кратко