grid-template-rows CSS

Become a Patron!

Свойство grid-template-rows определяет строки сетки с помощью списка значений разделённого пробелами. Значения представляют из себя размер трека, а пробелы между ними представляют линии сетки.

Значение по умолчанию:

none

Наследуется:
Нет
Анимируется:
Нет
Спецификации:
Поддержка браузерами:

Can I Use css-grid? Data on support for the css-grid feature across the major browsers from caniuse.com.

Синтаксис

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

/* <track-list> values */
grid-template-rows: 100px 1fr;
grid-template-rows: [linename] 100px;
grid-template-rows: [linename1] 100px [linename2 linename3];
grid-template-rows: minmax(100px, 1fr);
grid-template-rows: fit-content(40%);
grid-template-rows: repeat(3, 200px);

/* <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: [linename1] 100px [linename2]
                       repeat(auto-fit, [linename3 linename4] 300px)
                       100px;
grid-template-rows: [linename1 linename2] 100px
                       repeat(auto-fit, [linename1] 300px) [linename3];

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

Значения

  • <track-size> — может быть фиксированным размером, процентами или частью свободного пространства в сетке (определяется с помощью единицы fr (fraction));
  • <line-name> — произвольное имя на ваш выбор;

Поддержка браузерами

  • Реализован до функциональных возможностей экспериментальной веб-платформы в chrome://flags начиная с Chrome 29.0.
  • Реализован за преимуществом layout.css.grid.enabled начиная с Gecko 40.0 (Firefox 40.0 / Thunderbird 40.0 / SeaMonkey 2.37), имея значение по умолчанию false. Насиная с Gecko 52.0 включено по умолчанию.
  • Internet Explorer и Edge реализуют старую версию спецификации, которая не поддерживает сокращенную форму записи grid. Смотри request for updating the implementation.
  • Реализован до функциональных возможностей экспериментальной веб-платформы в chrome://flags начиная с Opera 28.0.
  • Экспериментальная реализация доступна в Safari Technological Preview.

Примеры

Когда вы оставляете пустое пространство между значениями треков, линиям сетки автоматически присваиваются числовые имена:

.container{
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

CSS Grid Lime Numbers
CSS Grid Lime Numbers

Но вы можете называть линии явно. Обратите внимание на синтаксис для их названия:

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

CSS Grid Lime Names
CSS Grid Lime Names

Обратите внимание на то что у линии может быть несколько названий. Например, здесь у второй линии будет два названия: row1-end и row2-start:

.container{
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

Если в вашем определении содержатся повторяющиеся части, то можно использовать нотацию repeat():

.container {
  grid-template-columns: repeat(3, 20px [col-start]) 5%;
}

Тоже самое что и:

.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}

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

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

Свободное пространство высчитывается после вычисления всех фиксированных элементов. В этом примере, общее количество свободного пространства для единиц fr не будет включать в себя 50px.

.container {
  grid-template-columns: 1fr 50px 1fr 1fr;
}