grid-template-columns

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

grid-template-columns: 60px 60px;

grid-template-columns: 1fr 60px;

grid-template-columns: 1fr 2fr;

grid-template-columns: 8ch auto;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  width: 200px;
}

#example-element > div {
  background-color: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
}

Синтаксис

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

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

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

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;
}

Результат

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

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

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

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