skip to main content

grid-template-rows

css

Кратко 🔗

Свойство, задающее размеры и количество рядов грид-раскладки.

Пример 🔗

Внутри блока .container будет создано 3 ряда:

.container {
display: grid;
grid-template-rows: 250px 5vw 15rem;
}

Как это понять 🔗

Свойство grid-template-rows командует браузеру, в сколько рядов выстраивать вложенные элементы. И какого размера должны быть эти ряды.

Как пишется 🔗

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

.container {
display: grid;
grid-template-rows: 5px 50px 40% 14rem 8em 1fr;
}

Подсказки 🔗

💡 Можно использовать функцию repeat() для создания рядов одного размера.
💡 Удобно использовать единицу измерения fr чтобы указать в каких соотношениях ряды разделят свободное место.
💡 Кроме непосредственного количества рядов и их размеров можно задавать и имена для грид-линий, ограничивающих эти ряды:

.container {
display: grid;
grid-template-rows: [row1-start] 25rem [row1-end] 10vh [last];
}

Автор: Алёна,