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
определяет имена линий и размеры грид-колонок.
Интерактивный пример
Синтаксис
/* Ключевые слова */
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 type | simple 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
<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;
}
Результат
Спецификации
Specification |
---|
CSS Grid Layout Module Level 2 # track-sizing |
CSS Grid Layout Module Level 2 # subgrids |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Связанные CSS-свойства:
grid-template-rows
,grid-template-areas
,grid-template
- Руководство по грид-раскладке: Основы грид-раскладки - грид-полосы
- Обучающее видео: Defining a Grid
- Subgrid