Свойства и функции для управления треками: grid-template-columns/rows, repeat(),
minmax(), fr, auto-fit/auto-fill, grid-column/grid-row, gap.
Свойства контейнера (grid-container)
Свойство
Назначение
Пример
grid-template-columns
Список колоночных треков (их ширины).
1fr 1fr 1fr
grid-template-rows
Список строчных треков (их высоты).
70px auto
gap
Зазор между треками (строки и колонки). Сокращение row-gap + column-gap.
gap: 1rem
Функции и единицы для треков
Запись
Что делает
Пример
fr
Доля свободного места контейнера.
2fr 1fr
repeat(n, …)
Повторяет шаблон треков n раз.
repeat(3, 1fr)
minmax(min, max)
Трек не меньше min и не больше max.
minmax(150px, 1fr)
auto-fit
Подбирает число треков, схлопывает пустые.
repeat(auto-fit, minmax(200px, 1fr))
auto-fill
Подбирает число треков, оставляет пустые-резервы.
repeat(auto-fill, minmax(200px, 1fr))
Свойства элемента (grid-item)
Свойство
Назначение
Пример
grid-column
Размещение по вертикальным линиям / span колонок.
1 / 3 или span 2
grid-row
Размещение по горизонтальным линиям / span строк.
1 / 3 или span 2
span N
Занять N соседних треков от текущей позиции.
grid-column: span 2
Как проверять: включите Grid overlay в DevTools (значок grid рядом с
display: grid в панели Styles) — браузер подсветит линии с номерами, треки и gap прямо на странице.