Модуль 4 · Урок 16
Grid placement, areas і subgrid
Placement має залишатися читабельним: numbered/named lines для точності, areas для зрозумілої карти, subgrid для спільних tracks. Вибір Flexbox чи Grid визначає потрібна вісь контролю, а не розмір component.
Lines/spansAreasSubgridLayout choice
Три способи placement
| Method | Коли | Guard |
|---|---|---|
| Line numbers/names | Точний span/edge | Документуйте negative lines |
grid-template-areas | Візуально читабельний shell | Кожна named area прямокутна |
| Auto-placement | Повторюваний content | Source order лишається логічним |
.dashboard { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.dashboard > h2, .activity { grid-column:1 / -1; }Subgrid і семантична вкладеність
Лише direct children є grid items. Не flatten semantic markup заради alignment: nested grid item може використати grid-template-columns:subgrid або grid-template-rows:subgrid і успадкувати parent tracks у відповідній осі.
FlexboxОдна axis, content-out, action/navigation rows.
GridRows + columns, layout-in, catalog/dashboard alignment.
TogetherGrid для card collection, Flexbox усередині card.
Normal flowЗалишається baseline для простого linear content.
Фінальний layout audit
- Заповніть placement map і DOM-vs-visual-order audit.
- У DevTools увімкніть flex/grid overlays та назвіть container/items/tracks.
- Перевірте Tab sequence, 200% text, long content і page overflow.
- Порівняйте starter/reference та поясніть, чому кожна ділянка Flex, Grid або normal flow.
BookFlow Flexbox & Grid Lab
12 локальних safe-файлів: starter/reference, розрахунки, track/placement maps і QA artifacts.
Офіційні джерела
Практична перевірка · урок 16 з 60
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.