grid-template-columns

none

Указывает на отсутствие явной грид-раскладки. Все колонки будут создаваться неявным образом, а их размер будет определяться свойством grid-auto-columns (en-US).

[linename]

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

<length>

Неотрицательная длина, задающая ширину колонки.

<percentage>

Неотрицательное значение в виде процента (<percentage>), вычисляющегося относительно встроенного размера грид-контейнера. Если размер грид-контейнера зависит от размера его полос, то процент будет рассматриваться как значение auto. Собственные размеры полосы могут быть скорректированы до размера грид-контейнера, что приведёт к увеличению конечного размера полосы на минимальную величину, необходимую для соблюдения процентного соотношения.

<flex>

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

При использовании вне функции minmax(), предполагается использование автоматического минимума (т.е. равнозначно minmax(auto, <flex>)).

max-content (en-US)

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

min-content (en-US)

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

minmax(min, max)

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

auto

При использовании в качестве максимального значения представляет собой размер наибольшего элемента среди всех элементов грид-полосы, что равнозначно max-content (en-US).

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

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

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

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

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

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

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

masonry (en-US) Экспериментальная возможность

Значение masonry указывает на то, что оси должны выстраиваться согласно алгоритму masonry (плиточной раскладки).

subgrid

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

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

<track-list> = 
  [ (en-US) <line-names>? (en-US) [ (en-US) <track-size> | (en-US) <track-repeat> ] (en-US) ] (en-US)+ (en-US) <line-names>? (en-US)  

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

<line-name-list> = 
  [ (en-US) <line-names> | (en-US) <name-repeat> ] (en-US)+ (en-US)  

<line-names> = 
  '[' <custom-ident>* (en-US) ']'  

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

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

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

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

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

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

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

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

<length-percentage> = 
  <length>      | (en-US)
  <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;
}

Результат

• Связанные CSS-свойства: grid-template-rows, grid-template-areas, grid-template
• Руководство по грид-раскладке: Основы грид-раскладки - грид-полосы
• Обучающее видео: Defining a Grid
• Subgrid