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 July 2020.

* Learn more
* See full compatibility
* Report feedback
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` (en-US).

`[linename]`

`<custom-ident>` задаёт имя для линии. Идентификатором может быть любая строка, кроме зарезервированных слов `span` и `auto`. У линий может быть несколько имён, перечисленных через пробел внутри квадратных скобок, например, `[line-name-a line-name-b]`.

`<length>`

Неотрицательная длина, задающая ширину колонки.

`<percentage>`

 Неотрицательное значение в виде процента (`<percentage>`), вычисляющегося относительно встроенного размера грид-контейнера. Если размер грид-контейнера зависит от размера его полос, то процент будет рассматриваться как значение `auto`.
 Собственные размеры полосы могут быть скорректированы до размера грид-контейнера, что приведёт к увеличению конечного размера полосы на минимальную величину, необходимую для соблюдения процентного соотношения.


`<flex>`

Неотрицательное значение с единицей измерения `fr`, определяющая показатель расширения. Каждая грид-полоса, заданная значением `<flex>`, занимает оставшееся свободное пространство пропорционально указанному показателю расширения.

При использовании вне функции `minmax()`, предполагается использование автоматического минимума (т.е. равнозначно `minmax(auto, <flex>)`).

`max-content` (en-US)

Ключевое слово, представляющее наибольший размер максимального содержимого среди всех грид-элементов в грид-полосе. Например, если в первом элементе грид-полосы будет находиться одно предложение: *"Repetitio est mater studiorum"*, а во втором — *"Dum spiro, spero"*, то максимальное содержимое будет определяться размером самого длинного предложения среди всех грид-элементов — *"Repetitio est mater studiorum"*.

`min-content` (en-US)

Ключевое слово, представляющее наибольший размер минимального содержимого среди всех грид-элементов в грид-полосе. Например, если в первом элементе грид-полосы будет находиться одно предложение: "Repetitio est mater studiorum", а во втором — "Dum spiro, spero", то минимальное содержимое будет определяться размером самого длинного слова среди всех предложений в грид—элементах — "studiorum".

`minmax(min, max)`

Функция, определяющая диапазон размеров грид-элемента, больший или равный *min* и меньший или равный *max*. Если *max* меньше *min*, то *max* игнорируется и функция будет использовать *min*. Можно задать показатель расширения `<flex>` в качестве максимально значения, но для минимального его использование недопустимо.

`auto`

При использовании в качестве максимального значения представляет собой размер наибольшего элемента среди всех элементов грид-полосы, что равнозначно `max-content` (en-US).

При использовании в качестве минимального значения представляет собой минимальный размер элемента среди всех элементов в грид-полосе (определённый свойствами `min-width`/`min-height` у элементов). Часто, хотя и не всегда, идентичен размеру `min-content` (en-US).

При использовании вне функции `minmax()`, `auto` представляет диапазон между минимумом и максимумом, описанным выше. В большинстве случаев это то же самое, что и `minmax(min-content,max-content)`.

**Примечание:** размеры полос, заданные значением `auto` (и только `auto`) могут быть растянуты с помощью свойств `align-content` и `justify-content`. Поэтому по умолчанию грид-полоса с размером `auto` будет занимать всё оставшееся свободное пространство в грид-контейнере.

``fit-content( [ <length> | <percentage> ] )` (en-US)`

Может быть выражен формулой `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> )` (en-US)

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

`masonry` (en-US)
Экспериментальная возможность

Значение `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                       | (en-US)  
  <track-list>               | (en-US)  
  <auto-track-list>          | (en-US)  
  subgrid <line-name-list>? (en-US)    
  
<track-list> =   
  [ (en-US) <line-names>? (en-US) [ (en-US) <track-size> | (en-US) <track-repeat> ] (en-US) ] (en-US)+ (en-US) <line-names>? (en-US)    
  
<auto-track-list> =   
  [ (en-US) <line-names>? (en-US) [ (en-US) <fixed-size> | (en-US) <fixed-repeat> ] (en-US) ] (en-US)\* (en-US) <line-names>? (en-US) <auto-repeat> [ (en-US) <line-names>? (en-US) [ (en-US) <fixed-size> | (en-US) <fixed-repeat> ] (en-US) ] (en-US)\* (en-US) <line-names>? (en-US)    
  
<line-name-list> =   
  [ (en-US) <line-names> | (en-US) <name-repeat> ] (en-US)+ (en-US)    
  
<line-names> =   
  '[' <custom-ident>\* (en-US) ']'    
  
<track-size> =   
  <track-breadth>                                   | (en-US)  
  minmax( <inflexible-breadth> , <track-breadth> )  | (en-US)  
  fit-content( <length-percentage [0,∞]> )            
  
<track-repeat> =   
  repeat( [ (en-US) <integer [1,∞]> ] (en-US) , [ (en-US) <line-names>? (en-US) <track-size> ] (en-US)+ (en-US) <line-names>? (en-US) )    
  
<fixed-size> =   
  <fixed-breadth>                                   | (en-US)  
  minmax( <fixed-breadth> , <track-breadth> )       | (en-US)  
  minmax( <inflexible-breadth> , <fixed-breadth> )    
  
<fixed-repeat> =   
  repeat( [ (en-US) <integer [1,∞]> ] (en-US) , [ (en-US) <line-names>? (en-US) <fixed-size> ] (en-US)+ (en-US) <line-names>? (en-US) )    
  
<auto-repeat> =   
  repeat( [ (en-US) auto-fill | (en-US) auto-fit ] (en-US) , [ (en-US) <line-names>? (en-US) <fixed-size> ] (en-US)+ (en-US) <line-names>? (en-US) )    
  
<name-repeat> =   
  repeat( [ (en-US) <integer [1,∞]> | (en-US) auto-fill ] (en-US) , <line-names>+ (en-US) )    
  
<track-breadth> =   
  <length-percentage [0,∞]>  | (en-US)  
  <flex [0,∞]>               | (en-US)  
  min-content                | (en-US)  
  max-content                | (en-US)  
  auto                         
  
<inflexible-breadth> =   
  <length-percentage [0,∞]>  | (en-US)  
  min-content                | (en-US)  
  max-content                | (en-US)  
  auto                         
  
<length-percentage> =   
  <length>      | (en-US)  
  <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 |
| CSS Grid Layout Module Level 3 # masonry-layout |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Связанные CSS-свойства: `grid-template-rows`, `grid-template-areas`, `grid-template`
* Руководство по грид-раскладке: *Основы грид-раскладки - грид-полосы*
* Обучающее видео: *Defining a Grid*
* Subgrid