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 Экспериментальная возможность

Значение 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> )                

<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>  | (en-US)
  <flex>               | (en-US)
  min-content          | (en-US)
  max-content          | (en-US)
  auto                 

<inflexible-breadth> = 
  <length-percentage>  | (en-US)
  min-content          | (en-US)
  max-content          | (en-US)
  auto                 

<length-percentage> = 
  <length>      | (en-US)
  <percentage>  

<fixed-breadth> = 
  <length-percentage>  

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