Когда что использовать
Flexbox — одномерная раскладка
Когда элементы выстраиваются в одну линию: строка, столбец, панель навигации, карточка товара. Управляет распределением свободного места вдоль главной оси.
Grid — двумерная раскладка
Когда важны и строки, и столбцы одновременно: галерея, дашборд, сетка карточек, макет страницы целиком.
Простое правило: одна ось — Flex, две оси — Grid.
Комбинировать их не только можно, но и нужно.
Интерактивная песочница
Сгенерированный CSS
container
Предпросмотр
1
2
3
4
5
Шпаргалка по свойствам
| Свойство | Где применяется | Что делает |
|---|---|---|
display | контейнер | Включает режим flex или grid |
justify-content | flex / grid | Выравнивание вдоль главной оси |
align-items | flex / grid | Выравнивание вдоль поперечной оси |
gap | flex / grid | Отступы между элементами (замена margin) |
flex-wrap | flex | Разрешает перенос на новую строку |
grid-template-columns | grid | Задаёт колонки; fr — доли свободного места |
grid-template-areas | grid | Именованные области макета |
Задание
- Соберите в песочнице раскладку «шапка — контент — сайдбар — подвал», используя Grid.
- Внутри сайдбара сделайте вертикальный список на Flexbox с
gap. - Добейтесь, чтобы при сужении окна колонки перестраивались в одну — подсказка:
auto-fit+minmax(). - Объясните письменно, почему для галереи изображений Grid подходит лучше, чем Flexbox.