CSS-свойствоgrid-template-columns определяет имена линий и размерыгрид-колонок.

Интерактивный пример

grid-template-columns: 60px 60px;

grid-template-columns: 1fr 60px;

grid-template-columns: 1fr 2fr;

grid-template-columns: 8ch auto;

<section>  <div>    <div>      <div>One</div>      <div>Two</div>      <div>Three</div>      <div>Four</div>      <div>Five</div>    </div>  </div></section>

#example-element {  border: 1px solid #c5c5c5;  display: grid;  grid-auto-rows: 40px;  grid-gap: 10px;  width: 200px;}#example-element > div {  background-color: rgba(0, 0, 255, 0.2);  border: 3px solid blue;}

Синтаксис

/* Ключевые слова */grid-template-columns: none;/* Значения типа <track-list> */grid-template-columns: 100px 1fr;grid-template-columns: [linename] 100px;grid-template-columns: [linename1] 100px [linename2 linename3];grid-template-columns: minmax(100px, 1fr);grid-template-columns: fit-content(40%);grid-template-columns: repeat(3, 200px);grid-template-columns: subgrid;grid-template-columns: masonry;/* Значения типа <auto-track-list> */grid-template-columns: 200px repeat(auto-fill, 100px) 300px;grid-template-columns:  minmax(100px, max-content)  repeat(auto-fill, 200px) 20%;grid-template-columns:  [linename1] 100px [linename2]  repeat(auto-fit, [linename3 linename4] 300px)  100px;grid-template-columns:  [linename1 linename2] 100px  repeat(auto-fit, [linename1] 300px) [linename3];/* Глобальные значения */grid-template-columns: inherit;grid-template-columns: initial;grid-template-columns: revert;grid-template-columns: unset;

Значения

none

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

[linename]

<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)), гдеminimum представляет собойauto-минимум (который часто, но не всегда представляет наименьший размер минимального содержимого) иlimit — любое значение или функция для определения размера полосы, переданная в качестве аргумента вfit-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>?<track-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>

<integer> =
<number-token>

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

Примеры

Определение грид-колонок с размерами

HTML

<div>  <div>A</div>  <div>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