В чем разница между flex и grid

Flexbox предназначен для одномерного макета (либо строка, либо колонка), упрощая выравнивание и распределение элементов внутри контейнера. Grid же работает с двумерными макетами (и строки, и колонки одновременно), позволяя создавать сложные сетки.

Flexbox пример:

.container {
  display: flex;
  justify-content: space-between;
}

Grid пример:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}

Flexbox лучше для небольших компонентов (навигация, карточки), Grid - для сложных макетов страницы. Они могут комбинироваться: Grid для общей структуры, Flexbox для внутренних элементов.