Flexbox и CSS Grid
Flexbox - одномерный
Управляет элементами в одном направлении (строка или столбец).
.container {
display: flex;
flex-direction: row;
justify-content: space-between; /* по главной оси */
align-items: center; /* по поперечной оси */
gap: 16px;
flex-wrap: wrap;
}
.item { flex: 1 } /* растягивается */
.item { flex: 0 0 200px } /* фиксированный */
Лучше подходит для: навигации, кнопок в ряд, карточек, выравнивания внутри компонента.
CSS Grid - двумерный
Управляет по строкам и столбцам одновременно.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.featured { grid-column: span 2 }
.header { grid-column: 1 / -1 } /* на всю ширину */
Лучше подходит для: сеток страниц, дашбордов, layouts с выравниванием по обеим осям.
Комбинируйте
.page { display: grid; grid-template-columns: 240px 1fr }
.nav { display: flex; flex-direction: column; gap: 8px }