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

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

⚡ Кратко

Шпаргалка выбора: 2D → Grid (grid-template-areas, repeat(auto-fit, minmax())), 1D → Flexbox (justify-content, flex).

Правило выбора инструмента

ЗадачаИнструментКлючевое свойство
Макет страницы (header/sidebar/main/footer)Gridgrid-template-areas
Сетка карточек / галереяGridrepeat(auto-fit, minmax(180px, 1fr))
Меню, тулбар, ряд кнопокFlexboxjustify-content / gap
Контент внутри ячейки в линиюFlexboxalign-items / flex: 1

Свойства Grid этого урока

СвойствоНазначениеПример
display: gridДелает элемент grid-контейнером.display: grid;
grid-template-areasРисует макет именами областей построчно."header header" "nav main"
grid-template-columnsЗадаёт ширины колонок (треков).14rem 1fr 16rem
grid-areaПомещает элемент в названную область.grid-area: main;
minmax(min, max)Трек не уже min и не шире max.minmax(0, 1fr)
repeat(auto-fit, …)Автоматически создаёт столько колонок, сколько влезает.repeat(auto-fit, minmax(180px, 1fr))
gapРасстояние между ячейками (без margin).gap: 1rem;

Свойства Flexbox для компонентов в ячейках

СвойствоНазначение
display: flexВыстраивает детей в один ряд (по умолчанию).
justify-contentРаспределяет по главной оси (space-between, center).
align-itemsВыравнивает по поперечной оси (center).
flex: 1Элемент забирает всё свободное место (прижимает соседей к краю).
Как проверять: для Grid-блоков открой Grid overlay в DevTools — увидишь треки, gap и имена областей; для Flex-блоков — Flexbox overlay рядом с элементом в инспекторе.

Навигация