Свойство CSS `grid-template-columns`

Свойство grid-template-columns CSS задаёт имена линий и функции определения размеров треков для столбцов сетки.

Попробуйте

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: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

Синтаксис

/* Keyword value */
grid-template-columns: none;

/* <track-list> values */
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;

/* <auto-track-list> values */
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];

/* Global values */
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(), оно подразумевает автоматический минимальный размер (то есть 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, но не всегда.

Если auto используется вне записи minmax(), оно задаёт диапазон между описанными выше минимальным и максимальным значениями. В большинстве случаев это работает аналогично 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> )

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

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

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

<integer> = 
  <number-token>

<fixed-breadth> = 
  <length-percentage>

Примеры

Задание размеров столбцов сетки

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

Результат

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

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

См. также

• grid-template-rows
• grid-template-areas
• grid-template
• Основы макета сетки: треки сетки
• Видео: Определение сетки
• Подсетка