4. Функции и ключевые слова

---

minmax()

Определяет диапазон размеров.

.container {
  grid-template-columns: minmax(100px, 1fr) minmax(200px, 2fr);
  grid-auto-rows: minmax(50px, auto);
}

fit-content()

Ограничивает размер содержимым, но не больше указанного значения.

.container {
  grid-template-columns: fit-content(300px) 1fr;
}

repeat()

Повторяет шаблон несколько раз.

.container {
  grid-template-columns: repeat(4, 1fr); /* 4 столбца по 1fr */
  grid-template-rows: repeat(3, minmax(100px, auto)); /* 3 строки */
  
  /* Auto-fill и auto-fit */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

Единицы измерения fr

Fractional unit — доля доступного пространства.

.container {
  grid-template-columns: 1fr 2fr 1fr; /* Соотношение 1:2:1 */
}