grid-template-columns

Властивість 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: revert-layer;
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(), значення <flex> призводить до автоматичного мінімуму (тобто 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 (котрий нерідко, хоч і не завжди, рівний мінімумові min-content), а limit – функція калібрування доріжки, передана як аргумент у fit-content(). По суті, обчислюється як менше серед minmax(auto, max-content) і minmax(auto, limit).

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

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

masonry

Значення masonry вказує на те, що ця вісь повинна компонуватися згідно з алгоритмом кладки.

subgrid

Значення subgrid вказує на те, що сітка займе за цією віссю розширену частку своєї батьківської сітки. Замість явного задання, розміри рядів і колонок сітки будуть взяті з означення батьківської сітки.

Формальне визначення

Початкове значенняnone
Успадковуєтьсяні
Обчислене значенняas specified, but with relative lengths converted into absolute lengths

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

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> )
<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> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length-percentage> | min-content | max-content | auto
<length-percentage> = <length> | <percentage>
<fixed-breadth> = <length-percentage>

Приклади

Задання розмірів колонок сітки

HTML

<div id="grid">
  <div id="areaA">А</div>
  <div id="areaB">Б</div>
</div>

CSS

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

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

Результат

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

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
grid-template-columns
Chrome Full support 57
Edge Full support 16
Firefox Full support 52
Internet Explorer Full support 10
altname
Opera Full support 44
Safari Full support 10.1
WebView Android Full support 57
Chrome Android Full support 57
Firefox for Android Full support 52
Opera Android Full support 43
Safari on iOS Full support 10.3
Samsung Internet Full support 6.0
Animation of tracks
Chrome No support No
footnote
Edge No support No
footnote
Firefox Full support 66
Internet Explorer No support No
Opera No support No
footnote
Safari No support No
footnote
WebView Android No support No
footnote
Chrome Android No support No
footnote
Firefox for Android Full support 66
Opera Android No support No
footnote
Safari on iOS No support No
footnote
Samsung Internet No support No
footnote
fit-content() Chrome Full support 57
Edge Full support 16
Firefox Full support 52
Internet Explorer No support No
Opera Full support 44
Safari Full support 10.1
WebView Android Full support 57
Chrome Android Full support 57
Firefox for Android Full support 52
Opera Android Full support 43
Safari on iOS Full support 10.3
Samsung Internet Full support 6.0
masonry
Experimental
Chrome No support No
Edge No support No
Firefox Full support 77
disabled
Internet Explorer No support No
Opera No support No
Safari No support No
WebView Android No support No
Chrome Android No support No
Firefox for Android No support No
Opera Android No support No
Safari on iOS No support No
Samsung Internet No support No
minmax() Chrome Full support 57
Edge Full support 16
Firefox Full support 52
Internet Explorer No support No
Opera Full support 44
Safari Full support 10.1
WebView Android Full support 57
Chrome Android Full support 57
Firefox for Android Full support 52
Opera Android Full support 43
Safari on iOS Full support 10.3
Samsung Internet Full support 6.0
repeat() Chrome Full support 57
Edge Full support 16
Firefox Full support 76
Internet Explorer No support No
Opera Full support 44
Safari Full support 10.1
WebView Android Full support 57
Chrome Android Full support 57
Firefox for Android Full support 79
Opera Android Full support 43
Safari on iOS Full support 10.3
Samsung Internet Full support 6.0
subgrid Chrome No support No
footnote
Edge No support No
footnote
Firefox Full support 71
Internet Explorer No support No
Opera No support No
footnote
Safari No support No
footnote
WebView Android No support No
footnote
Chrome Android No support No
footnote
Firefox for Android No support No
Opera Android No support No
footnote
Safari on iOS No support No
footnote
Samsung Internet No support No
footnote

Дивіться також