grid-template-columns

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

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

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

Синтаксис

css
/* Ключевые слова */
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 указывает, что грид-раскладка примет размеры родительского грид-контейнера на соответствующих осях. Таким образом размеры колонок и рядов не задаются явно, а берутся из определения родительской грид-раскладки.

Предупреждение: Значение masonry появилось в CSS-спецификации Grid Level 3 и на данный момент в качестве эксперимента реализовано в Firefox и активируется через флаг в настройках.

Значение subgrid представлено в CSS-спецификации Grid Level 2 и пока что реализовано только в Firefox с 71 версии.

Формальное определение

Начальное значениеnone
Применяется ксеточные контейнеры
Наследуетсянет
Процентыотносятся к соответствующему размеру области содержимого
Обработка значениякак указано, но с относительной длиной, конвертируемой в абсолютные длины
Animation typesimple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list

Формальный синтаксис

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

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

CSS

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

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

Результат

Спецификации

Specification
CSS Grid Layout Module Level 2
# track-sizing
CSS Grid Layout Module Level 2
# subgrids

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также