В прошлом уроке мы задавали столбцы вручную: 1fr 1fr 1fr. Но если столбцов десять, писать десять одинаковых значений утомительно и легко ошибиться. А ещё бывает, что столбец должен подстраиваться: не уже определённого предела, но и не шире разумного максимума. Обычный 1fr так не умеет. Для этих задач в Grid есть функция repeat(), которая повторяет описание столбцов, и minmax(), которая задаёт размер в диапазоне «от и до».

После этого урока вы сможете описывать сетки короче и делать столбцы по-настоящему гибкими — такими, что они сами держат разумную ширину при любом размере экрана.

Что уже умеем / что добавим

Вы умеете включать сетку и задавать столбцы через grid-template-columns с единицей fr. Теперь научимся записывать это компактнее и гибче. В сквозном проекте мы перепишем сетку карточек услуг так, чтобы она сама адаптировала ширину столбцов без лишнего кода.

Что вы узнаете в рамках статьи

• Как повторять столбцы функцией repeat().
• Как задавать размер в диапазоне через minmax().
• Как сочетать repeat() и minmax() в одном описании.
• Чем fr отличается от фиксированных единиц в гибкой сетке.

Ключевые термины

• repeat(n, размер) — функция, повторяющая описание столбца или строки n раз.
• minmax(min, max) — размер в диапазоне: не меньше min и не больше max.
• min-content — минимальный размер по содержимому.
• max-content — размер по содержимому без переносов.

Повторяем столбцы: repeat()

Когда столбцы одинаковы, их описание можно не дублировать, а свернуть в функцию repeat(). Первый аргумент — сколько раз повторить, второй — что именно:

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

Запись repeat(3, 1fr) полностью равна 1fr 1fr 1fr, но короче и понятнее: «три столбца по одной доле». Для десяти столбцов достаточно repeat(10, 1fr) вместо длинной строки значений. Аргументом может быть и более сложный шаблон — например, repeat(2, 100px 1fr) создаст чередование: 100px, 1fr, 100px, 1fr — четыре столбца. Так repeat() экономит код и уменьшает риск опечатки.

Диапазон размера: minmax()

Иногда столбцу нужен не фиксированный размер, а диапазон. Функция minmax(min, max) задаёт именно это: браузер не сделает столбец уже min и не шире max.

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

Здесь каждый из трёх столбцов не будет уже 150 пикселей, но при наличии места растянется, деля пространство по 1fr. На широком экране столбцы разъедутся поровну, а на узком не сожмутся меньше 150 пикселей — контент останется читаемым. Это очень частый приём: minmax(минимум, 1fr) даёт столбец, который «дышит» в разумных пределах.

В minmax() можно использовать и специальные значения. Например, minmax(min-content, 1fr) не даст столбцу стать уже его содержимого. Но на практике чаще всего минимум задают в пикселях или rem — это предсказуемо и просто.

Сочетаем repeat() и minmax()

Настоящая сила проявляется, когда repeat() и minmax() работают вместе. Это стандартный способ описать сетку из нескольких гибких столбцов одной строкой:

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 16px;
}

Читается это так: «четыре столбца, каждый шириной от 120 пикселей до одной доли свободного места». Все столбцы равны между собой, растягиваются вместе с контейнером, но никогда не станут уже 120 пикселей. Одна строка кода описывает аккуратную и устойчивую сетку. В следующих уроках мы увидим, как та же идея с auto-fit позволит сетке самой менять число столбцов — но сначала важно уверенно владеть repeat() и minmax().

Применяем в проекте

Перепишем сетку карточек услуг так, чтобы столбцы были гибкими. Заменим 1fr 1fr 1fr на repeat() с minmax() — код станет короче, а карточки не будут сжиматься слишком сильно.

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

Обновите страницу: внешне сетка осталась прежней — три равных столбца с промежутками. Но теперь описание короче и надёжнее: каждый столбец не сожмётся уже 200 пикселей, а на широком экране карточки поделят место поровну. Мы заложили основу для будущей адаптивности, не усложнив код.

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

• Перепутан порядок в minmax().
  Первым идёт минимум, вторым максимум: minmax(150px, 1fr), а не наоборот.
• repeat() с несовместимым содержимым.
  Первый аргумент — число повторов; repeat(1fr, 3) — ошибка.
• Максимум в пикселях там, где нужна гибкость.
  minmax(150px, 300px) перестанет тянуться после 300px; для растягивания в максимуме ставьте 1fr.
• Ожидание переноса столбцов.
  repeat(3, ...) всегда даёт ровно три столбца; автоматическое изменение их числа — тема урока про auto-fit.

Итоги

Отличная работа — ваши сетки стали гибкими и лаконичными! Вы научились повторять столбцы функцией repeat(), задавать размеры в диапазоне через minmax() и сочетать их, описывая устойчивую сетку одной строкой. Теперь столбцы вашего проекта держат разумную ширину и не ломаются на разных экранах — это большой шаг к адаптивной вёрстке.

Так держать! В следующем уроке мы научимся размещать элементы по конкретным линиям сетки с помощью grid-column, grid-row и grid-area — и сможем растягивать ячейки на несколько столбцов и строк.