CSS Flexbox и Grid — два мощных инструмента для создания макетов. Но как понять, когда использовать каждый из них?
Flexbox: для одномерных макетов
Flexbox предназначен для работы с одним измерением — строкой или колонкой. Он идеально подходит для:
- Навигационных меню
- Выравнивания элементов в строке
- Создания карточек в ряд
/* Пример Flexbox */
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
Grid: для двумерных макетов
Grid позволяет работать с двумя измерениями одновременно — строками и колонками. Он идеально подходит для:
- Сеток и галерей
- Сложных макетов страниц
- Создания адаптивных сеток
/* Пример Grid */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
Когда использовать вместе
Flexbox и Grid отлично работают вместе. Например, вы можете использовать Grid для основного макета страницы, а внутри ячеек использовать Flexbox для выравнивания содержимого.