grid-template-columns

none

Указывает, что явная сетка отсутствует. Любые столбцы будут неявно сгенерированы, а их размер будет определен свойством grid-auto-columns.

[line-name]

<custom-ident>, определяющий имя линии в данном месте. Идентификатор может быть любой допустимой строкой, кроме зарезервированных слов span и auto. Линии могут иметь несколько имён, разделённых пробелом внутри квадратных скобок, например [line-name-a line-name-b].

<length>

Положительная длина, задающая ширину столбца.

<percentage>

Это положительное значение <percentage>, относительное к размеру контейнера сетки по горизонтали. Если размер контейнера сетки зависит от размера его полос, то процент должен рассматриваться как auto. Вклад внутренней величины полосы может быть скорректирован для размера контейнера сетки, увеличивая конечный размер полосы на минимальное количество, которое приведет к соблюдению процента.

<flex>

Это положительная величина с единицей fr, определяющая коэффициент гибкости полосы. Каждая полоса размера <flex> занимает долю оставшегося пространства пропорционально своему коэффициенту гибкости.

Когда оно появляется вне обозначения minmax() , это подразумевает автоматический минимум (т. е. minmax(auto, <flex>)).

max-content

Это ключевое слово, представляющее наибольший максимальный вклад содержимого элементов сетки, занимающих полосу сетки. Например, если первый элемент полосы сетки содержит предложение "Repetitio est mater studiorum", а второй — предложение "Dum spiro, spero", максимальный вклад содержимого будет определен размером самого большого предложения среди всех элементов сетки — "Repetitio est mater studiorum".

min-content

Это ключевое слово, представляющее наибольший минимальный вклад содержимого элементов сетки, занимающих полосу сетки. Например, если первый элемент полосы сетки содержит предложение "Repetitio est mater studiorum", а второй — предложение "Dum spiro, spero", минимальный вклад содержимого будет определен размером самого большого слова среди всех предложений в элементах сетки — "studiorum".

minmax(min, max)

Это функциональная запись, определяющая диапазон размеров, не меньший, чем min, и не больший, чем max. Если max меньше min, то max игнорируется, и функция обрабатывается как min. В качестве максимума значение <flex> задает коэффициент гибкости полосы. Оно недопустимо в качестве минимума.

auto

В качестве максимума представляет наибольший max-content размер элементов в данной полосе.

В качестве минимума представляет наибольший минимальный размер элементов в данной полосе (определяется min-width/min-height элементов). Это часто, хотя и не всегда, размер min-content.

Если используется вне обозначения minmax(), auto представляет диапазон между минимальным и максимальным значениями, описанными выше. Это работает аналогично minmax(min-content,max-content) в большинстве случаев.

Примечание: Размеры полос auto (и только auto полос) могут быть растянуты свойствами align-content и justify-content. Поэтому по умолчанию полоса размера auto займёт всё оставшееся пространство в контейнере сетки.

fit-content( [ <length> | <percentage> ] )

Представляет формулу max(minimum, min(limit, max-content)), где минимум представляет auto минимум (который часто, но не всегда, равен min-content минимуму), а предел — функция задания размера полосы, переданная в качестве аргумента fit-content(). Это по существу рассчитывается как меньшее из значений minmax(auto, max-content) и minmax(auto, limit).

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

Представляет повторяющийся фрагмент списка полос, позволяющий записать большое количество столбцов с повторяющимся шаблоном в более компактной форме.

masonry

Значение masonry указывает, что эта ось должна быть выложена в соответствии с алгоритмом masonry.

subgrid

Значение subgrid указывает, что сетка примет охватываемую часть родительской сетки по этой оси. Вместо явного указания размеры строк/столбцов сетки будут взяты из определения родительской сетки.

grid-template-columns = 
  none                       |
  <track-list>               |
  <auto-track-list>          |
  subgrid <line-name-list>?  

<track-list> = 
  [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?  

<auto-track-list> = 
  [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?  

<line-name-list> = 
  [ <line-names> | <name-repeat> ]+  

<line-names> = 
  '[' <custom-ident>* ']'  

<track-size> = 
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage [0,∞]> )          

<track-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )  

<fixed-size> = 
  <fixed-breadth>                                   |
  minmax( <fixed-breadth> , <track-breadth> )       |
  minmax( <inflexible-breadth> , <fixed-breadth> )  

<fixed-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<auto-repeat> = 
  repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<name-repeat> = 
  repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )  

<track-breadth> = 
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  min-content                |
  max-content                |
  auto                       

<inflexible-breadth> = 
  <length-percentage [0,∞]>  |
  min-content                |
  max-content                |
  auto                       

<length-percentage> = 
  <length>      |
  <percentage>  

<fixed-breadth> = 
  <length-percentage [0,∞]>  

HTML

<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>

CSS

#grid {
  display: grid;
  width: 100%;
  grid-template-columns: 50px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

Результат

• grid-template-rows
• grid-template-areas
• grid-template
• Основные понятия макета сетки: дорожки сетки
• Видео: Определение сетки
• Подсетка