Grid в деталях: функции repeat(), minmax(), auto-fit/auto-fill и др.

CSS Grid — это мощный инструмент, который позволяет создавать сложные макеты с минимальными усилиями. Но настоящая магия начинается, когда ты осваиваешь его продвинутые функции, такие как repeat(), minmax(), auto-fit и auto-fill. Давай разберём их подробно и сделаем твои вёрстки ещё гибче!

🔄 repeat(): Избегай повторяющегося кода

Часто приходится писать однотипные значения для grid-template-columns или grid-template-rows. Вместо:

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

— можно использовать repeat():

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

Как это работает?
repeat(количество_повторов, размер) — заменяет ручное перечисление. Особенно полезно для больших сеток.

💡 Совет: repeat() можно комбинировать с другими значениями. Например: .grid {grid-template-columns: 100px repeat(3, 1fr) 50px;}

📏 minmax(): Гибкость с ограничениями

Иногда нужно, чтобы колонка или строка занимала не меньше X и не больше Y. Для этого есть minmax(min, max).

Пример с адаптивными карточками:

.grid {
  grid-template-columns: repeat(3, minmax(200px, 1fr));
}

Что это даёт?
- Колонки не станут уже 200px (например, на маленьких экранах).
- На широких экранах растянутся пропорционально (1fr).

⚠️ Важно: Если контейнер уже, чем сумма min-значений, появится горизонтальный скролл. Чтобы избежать этого, используй auto-fit или auto-fill.

🤖 auto-fit vs auto-fill: Интеллектуальное заполнение

Обе функции работают внутри repeat() и управляют размещением колонок/строк при недостатке места.

Разница на примере:

.grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

auto-fit: - Схлопывает пустые треки (если контента меньше, чем вмещает сетка).
- Растягивает оставшиеся колонки на всё доступное пространство.

auto-fill: - Сохраняет все треки, даже пустые.
- Полезно, если контент динамически подгружается (например, через JS).

🔍 Проверь сам: Открой этот Codepen, создай сетку и меняй ширину экрана. Разница станет очевидной!

🧩 Комбинируем возможности

Вот пример сложной сетки с сочетанием всех функций:

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

Что здесь происходит?
- Колонки подстраиваются под ширину экрана (auto-fit).
- Каждая колонка — от 200px до 300px.
- Последняя колонка (1fr) забирает оставшееся место.

🎨 Практический пример: Галерея изображений

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

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}

Почему auto-fill?
Галерея может пополняться новыми изображениями, и сетка должна заранее резервировать место.

🌟 Продвинутый приём: Named Grid Lines

Для ещё большего контроля можно именовать линии сетки:

.grid {
  display: grid;
  grid-template-columns: 
    [start] 1fr 
    [content-start] repeat(2, minmax(100px, 1fr)) 
    [content-end] 1fr [end];
}

Теперь можно размещать элементы так:

.item {
  grid-column: content-start / content-end;
}

Итоги

• repeat() — избавляет от рутины.
• minmax() — задаёт гибкие границы.
• auto-fit/auto-fill — автоматизируют адаптивность.
• Комбинируя эти функции, можно создавать макеты любой сложности.

Попробуй применить эти техники в своём следующем проекте, и ты почувствуешь, насколько мощным может быть CSS Grid! Если хочешь глубже разобрать примеры, загляни на YouTube-канал Данилы Бежина — там есть отличные разборы.