Grid и media queries

Комбинирование CSS Grid и media queries позволяет кардинально перестраивать раскладку для разных устройств, меняя grid-template-columns и grid-template-areas в брейкпоинтах.

Зачем нужно

Grid и media queries — мощная связка для адаптивного дизайна. Grid определяет структуру, media queries адаптируют её под экран. Изменение одного свойства grid-template-columns может полностью переставить все элементы страницы без дублирования HTML. Кроме того, auto-fill + minmax часто позволяет вообще избежать медиазапросов.

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

  • Адаптивные макеты страниц
  • Переключение сеток (3 колонки → 2 → 1)
  • Изменение порядка блоков на мобиле
  • Адаптивные дашборды

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

Базовый адаптивный макет

/* Mobile first: 1 колонка */
.page {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
}

/* Планшет: 2 колонки */
@media (min-width: 768px) {
  .page {
    grid-template-columns: 240px 1fr;
    grid-template-areas:
      "header  header"
      "sidebar main"
      "footer  footer";
  }
}

/* Десктоп: 3 колонки */
@media (min-width: 1200px) {
  .page {
    grid-template-columns: 200px 1fr 160px;
    grid-template-areas:
      "header  header  header"
      "sidebar main    aside"
      "footer  footer  footer";
  }
}

Адаптивная карточная сетка с брейкпоинтами

/* Mobile: 1 колонка */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 480px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1200px) {
  .cards { grid-template-columns: repeat(4, 1fr); }
}

Без медиазапросов — auto-fill

/* Адаптивно без единого @media */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

Container queries (современный подход)

/* Раскладка зависит от размера контейнера, не viewport */
.card-wrapper {
  container-type: inline-size;
}

.card {
  display: grid;
  grid-template-columns: 1fr;
}

@container (min-width: 400px) {
  .card {
    grid-template-columns: 1fr 2fr;
  }
}

Изменение порядка через grid-template-areas

.article {
  display: grid;
  grid-template-areas:
    "image"
    "title"
    "body"
    "sidebar";
}

/* На широком: sidebar справа от body */
@media (min-width: 900px) {
  .article {
    grid-template-columns: 1fr 300px;
    grid-template-areas:
      "image   image"
      "title   title"
      "body    sidebar";
  }
}

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

  • Desktop-first вместо mobile-first — min-width проще и чище, чем переопределение через max-width
  • Слишком много брейкпоинтов — 3 брейкпоинта (мобил/планшет/десктоп) достаточно для большинства сеток
  • Медиазапросы для каждого компонента отдельно — лучше использовать auto-fill + minmax для сеток и container queries для компонентов

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

Ресурсы