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

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

Попробуйте

grid-template-rows: auto;

grid-template-rows: 40px 4em 40px;

grid-template-rows: 1fr 2fr 1fr;

grid-template-rows: 3ch auto minmax(10px, 60px);

<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-template-columns: 1fr 1fr;
  grid-gap: 10px;
  width: 200px;
}

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

Синтаксис

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

/* <track-list> values */
grid-template-rows: 100px 1fr;
grid-template-rows: [line-name] 100px;
grid-template-rows: [line-name1] 100px [line-name2 line-name3];
grid-template-rows: minmax(100px, 1fr);
grid-template-rows: fit-content(40%);
grid-template-rows: repeat(3, 200px);
grid-template-rows: subgrid;

/* <auto-track-list> values */
grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
grid-template-rows:
  minmax(100px, max-content)
  repeat(auto-fill, 200px) 20%;
grid-template-rows:
  [line-name1] 100px [line-name2]
  repeat(auto-fit, [line-name3 line-name4] 300px)
  100px;
grid-template-rows:
  [line-name1 line-name2] 100px
  repeat(auto-fit, [line-name1] 300px) [line-name3];

/* Global values */
grid-template-rows: inherit;
grid-template-rows: initial;
grid-template-rows: revert;
grid-template-rows: revert-layer;
grid-template-rows: unset;

Это свойство можно задать одним из следующих способов:

• с помощью ключевого слова none
• с помощью значения <track-list>
• или значения <auto-track-list>.

Значения

none

Ключевое слово, означающее, что явная сетка отсутствует. Любые строки будут созданы неявно, а их размер будет определяться свойством grid-auto-rows.

[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

Ключевое слово, обозначающее наибольший максимальный вклад в размер содержимого среди элементов сетки, занимающих трек сетки.

min-content

Ключевое слово, обозначающее наибольший минимальный вклад в размер содержимого среди элементов сетки, занимающих трек сетки.

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

Обозначает формулу min(max-content, max(auto, argument)), которая вычисляется аналогично auto (то есть minmax(auto, max-content)), за исключением того, что размер трека ограничивается значением argument, если оно превышает минимальное значение auto.

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

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

subgrid

Указывает, что сетка будет использовать охватываемую часть родительской сетки по этой оси. Вместо явного задания размеры строк/столбцов сетки берутся из определения родительской сетки.

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

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

grid-template-rows = 
  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;
  height: 100px;
  grid-template-rows: 30px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

Результат

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

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

См. также

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