← Словарь03.a / Термин
programming
CSS: Flexbox и Grid
Средний уровень CSS: Flexbox (main/cross axis, justify-content, align-items, flex-grow/shrink) для строк/колонок и CSS Grid (grid-template-columns/rows, ga
Категория
—
Оригинал
CSS Flexbox and Grid (флекс и грид вёрстка) · en
Обновлено
4 июл. 2026
Теги
—
Суть в одном предложении
Flexbox и Grid — это два современных механизма раскладки: Flexbox для одномерного потока, Grid — для двумерных сеток.
Краткое определение
Средний уровень CSS: Flexbox (main/cross axis, justify-content, align-items, flex-grow/shrink) для строк/колонок и CSS Grid (grid-template-columns/rows, gap, grid-area) для сложных двумерных макетов страницы.
Ключевые моменты
- Flexbox выстраивает элементы вдоль одной оси (строка или колонка)
- Grid задаёт сетку из строк и колонок сразу в двух измерениях
- justify-content управляет распределением по главной оси flex-контейнера
- fr в Grid — гибкая доля свободного пространства