Атрибут CSS grid-template-rows

Определение и использование

grid-template-rows определяет количество строк (и высоту) в сеточной разметке.

Значения представляют собой список, разделенный пробелами, где каждый элемент указывает на высоту соответствующей строки.

См. также:

CSS учебник:CSS сеточная разметка

CSS справочник:Свойство grid-columns

CSS справочник:Свойство grid-template

Пример

Определите размер строки (высоту):

.grid-container {
  display: grid;
  grid-template-rows: 100px 300px;
}

Попробуйте сами

CSS синтаксис

grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;

Значение атрибута

Значение Описание
none Размер не установлен. Создайте строку по мере необходимости.
auto Размер строки зависит от размера контейнера и размера содержимого элементов в строке.
max-content Установите размер каждой строки в зависимости от максимального элемента в строке.
min-content Установите размер каждой строки в зависимости от минимального элемента в строке.
length Установите размер строки, используя законные значения длины. См.Единицы измерения длины.

Технические детали

Значение по умолчанию: none
Наследование: нет
Создание анимации: Поддерживается. См. также:Свойства анимации.
Версия: CSS Grid Layout Module Level 1
JavaScript синтаксис: object.style.gridTemplateRows="50px 200px"

Поддержка браузеров

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44