Адаптивные сетки: создание гибкой системы колонок и контента

Почему адаптивные сетки — это мастхэв 🧩

Адаптивные сетки — это фундамент современного веб-дизайна. Они позволяют контенту плавно подстраиваться под любые экраны: от смартфона до 4K-монитора. Если раньше верстальщики мучились с float и таблицами, то сегодня у нас есть CSS Grid и Flexbox — мощные, интуитивные инструменты.

💡 Секретное правило: Хорошая сетка не просто «реагирует» на ширину экрана — она предугадывает поведение контента.

Основные подходы к созданию сеток

1. Flexbox для простых колонок

Идеален для одномерных макетов (ряды или колонки). Быстро превращает любой контейнер в гибкую сетку:

.container {
  display: flex;
  gap: 20px; /* Пространство между элементами */
  flex-wrap: wrap; /* Перенос на новую строку */
}

.item {
  flex: 1 1 200px; /* Растягиваться, сжиматься, базовая ширина */
}

🔹 Почему это работает:
- flex: 1 1 200px означает: «Займи минимум 200px, но можешь расти и сжиматься».
- gap заменяет старые хаки с margin.

2. CSS Grid для сложных структур

Мощный инструмент для двумерных макетов (и строки, и столбцы одновременно). Пример сетки из 3 колонок:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

🔹 Разберём магию:
- auto-fit автоматически создаёт колонки, пока есть место.
- minmax(250px, 1fr) — ширина колонки от 250px до доступного пространства.

🛠 Профессиональный лайфхак: Добавьте margin: 0 auto к контейнеру, чтобы центрировать сетку на широких экранах.

Контрольные точки (breakpoints) — где гнётся макет

Используйте медиазапросы для точечной настройки сетки на разных экранах. Например, превращаем 4 колонки в 1 на мобильных устройствах:

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr; /* Одна колонка */
  }
}

🔹 Важно: Не создавайте десятки брейкпоинтов! Оптимально — 3-5 точек (например, 576px, 768px, 992px, 1200px).

Практика: Создаём «живую» галерею изображений

Допустим, нам нужно вывести фотографии разного размера без искажений. Вот как это сделать с CSS Grid:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-rows: 200px; /* Фиксированная высота ряда */
  gap: 10px;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Обрезает изображение без деформации */
}

🔹 Почему object-fit: cover? Это гарантирует, что изображения заполнят всю область без растягивания.

Типичные ошибки и как их избежать

1. Жёсткие размеры

/* Плохо: */
.item { width: 300px; }

/* Хорошо: */
.item { max-width: 300px; width: 100%; }

2. Игнорирование gap

Не используйте margin для отступов между элементами сетки — только gap (и для Flexbox, и для Grid).

3. Переусложнение

Если можно сделать на Flexbox, не подключайте Grid.

Итог: 3 главных принципа адаптивных сеток

Гибкость: Используйте fr, minmax(), auto-fit.
Простота: Чем меньше медиазапросов — тем лучше.
Контроль: Контент определяет поведение, а не наоборот.

Теперь — твоя очередь! Поэкспериментируйте с CodePen и попробуйте собрать сетку, которая «дышит» от 320px до 1920px. 🎨