Глава 34. CSS продвинуто: Flexbox, Grid, адаптив

Зачем эта глава

Чтобы интерфейс выглядел профессионально, нужно уметь быстро строить сетки и адаптивные блоки. Flexbox и Grid — главные инструменты.

Flexbox: когда элементы идут в ряд

Flexbox удобен для шапок, меню, карточек и простых сеток.

.toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

Grid: когда нужна сетка

Grid проще для сложных сеток (карточки, каталоги, галереи).

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

Адаптивность

Используй медиа-запросы, чтобы интерфейс был удобным на телефоне.

@media (max-width: 600px) {
  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }
}

Задания