grid-template-columns

Властивість CSS grid-template-columns визначає імена ліній і функції калібрування доріжок сіткових колонок.

Спробуйте його в дії

Синтаксис

/* Значення – ключове слово */
grid-template-columns: none;

/* Значення <track-list> */
grid-template-columns: 100px 1fr;
grid-template-columns: [line-name] 100px;
grid-template-columns: [line-name1] 100px [line-name2 line-name3];
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:
  [line-name1] 100px [line-name2]
  repeat(auto-fit, [line-name3 line-name4] 300px)
  100px;
grid-template-columns:
  [line-name1 line-name2] 100px
  repeat(auto-fit, [line-name1] 300px) [line-name3];

/* Глобальні значення */
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.

[line-name] (ім'я ряду)

<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).

[!NOTE] Розміри доріжок 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 | <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;
}

Результат

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

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

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

• Пов'язані властивості CSS: grid-template-rows, grid-template-areas, grid-template
• Посібник з сіткового компонування: Базові концепції сіткового компонування – сіткові доріжки
• Відеоурок: Визначення сітки
• Subgrid