Flexbox внутри Grid

Комбинирование Grid и Flexbox — стандартный подход: Grid управляет двумерной раскладкой страницы, Flexbox — одномерным выравниванием внутри каждой ячейки.

Зачем нужно

Grid и Flexbox — не конкуренты, а партнёры. Grid идеален для общей раскладки страницы (rows + columns), Flexbox — для компонентов внутри ячеек (выравнивание элементов карточки, навбар, кнопки). Использование обоих вместе — современный стандарт вёрстки.

Где используется

  • Grid-сетка карточек, каждая карточка — flex-контейнер
  • Grid-макет страницы, navbar — flex
  • Grid-дашборд с flex-виджетами
  • Grid-галерея с flex-подписями

Основной контент

Принцип разделения ответственности

Grid — 2D раскладка страницы/секции
  └── Flexbox — 1D раскладка внутри компонента

Карточная сетка

/* Grid управляет сеткой */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* Flexbox управляет содержимым карточки */
.card {
  display: flex;
  flex-direction: column;  /* Вертикальный flex внутри grid-ячейки */
}

.card__body {
  flex: 1;  /* Растягивает контент — прижимает footer */
}

.card__footer {
  display: flex;      /* Ещё один flex внутри */
  justify-content: space-between;
  align-items: center;
}

Страница: Grid снаружи, Flex внутри

/* Макет страницы — Grid */
.page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

/* Navbar внутри header — Flex */
.header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
}

.header .logo { font-weight: bold; }
.header .nav  { display: flex; gap: 8px; }
.header .actions { margin-left: auto; display: flex; gap: 8px; }

Grid-виджет с flex-контентом

.dashboard {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.widget {
  grid-column: span 4;
  display: flex;           /* Flex внутри grid-ячейки */
  flex-direction: column;
  padding: 16px;
  background: white;
  border-radius: 8px;
}

.widget--wide { grid-column: span 8; }

.widget__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.widget__value {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 2rem;
}

Частые ошибки

  • Выбор инструмента — использование только Grid там, где нужен Flex (и наоборот) усложняет код; Grid — для двумерных раскладок, Flex — для линейных компонентов
  • display: flex на grid-элементе — это нормально; grid-элемент может быть одновременно flex-контейнером для своих потомков
  • Слишком глубокая вложенность — 2-3 уровня grid/flex — норма; больше — признак усложнённой структуры

Связанные темы

Ресурсы