Пошук уроків, статей та іншого контенту
Навчимося створювати рядки сітки та керувати їхньою висотою через властивість grid-template-rows.
grid-template-rowsВластивість grid-template-rows визначає кількість рядків CSS Grid і їхню висоту.
Щоб властивість працювала, елемент потрібно перетворити на grid-контейнер за допомогою display: grid.
.container {
display: grid;
grid-template-rows: 100px 200px;
}У цьому прикладі створено два рядки:
перший має висоту 100px;
другий має висоту 200px.
Елементи всередині контейнера розміщуватимуться в цих рядках.
Найпростіший варіант — указати фіксовані значення висоти.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Рядки CSS Grid</title>
<style>
.grid {
display: grid;
grid-template-rows: 80px 150px 100px;
gap: 10px;
width: 400px;
}
.item {
padding: 20px;
background-color: lightblue;
border: 1px solid steelblue;
}
</style>
</head>
<body>
<div class="grid">
<div class="item">Перший рядок</div>
<div class="item">Другий рядок</div>
<div class="item">Третій рядок</div>
</div>
</body>
</html>Властивість:
grid-template-rows: 80px 150px 100px;створює три рядки:
80px;
150px;
100px.
Проміжки між рядками задаються окремо за допомогою gap.
frОдиниця fr означає частину доступного простору grid-контейнера.
.grid {
display: grid;
height: 500px;
grid-template-rows: 1fr 2fr;
}Після розподілу вільного простору:
перший рядок отримає одну частину;
другий рядок отримає дві частини.
Тобто висота рядків буде розподілена у співвідношенні 1:2.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Рядки з fr</title>
<style>
.grid {
display: grid;
grid-template-rows: 1fr 2fr;
height: 300px;
gap: 10px;
}
.item {
padding: 16px;
background-color: #d8f3dc;
border: 1px solid #40916c;
}
</style>
</head>
<body>
<div class="grid">
<div class="item">Рядок 1</div>
<div class="item">Рядок 2</div>
</div>
</body>
</html>У контейнері висотою 300px другий рядок буде приблизно вдвічі вищим за перший. Частину простору займуть також проміжки gap.
У grid-template-rows можна поєднувати різні одиниці вимірювання.
.grid {
display: grid;
height: 500px;
grid-template-rows: 100px 1fr 2fr;
}У цьому прикладі:
перший рядок має фіксовану висоту 100px;
залишок доступного простору розподіляється між другим і третім рядками;
третій рядок отримує вдвічі більше вільного простору, ніж другий.
Такий підхід зручний для сторінки, де, наприклад, верхня панель має сталу висоту, а решта області розподіляється між іншими частинами.
autoЗначення auto дозволяє рядку підлаштовуватися під вміст.
.grid {
display: grid;
grid-template-rows: auto 1fr auto;
height: 500px;
}Тут:
перший рядок займає висоту, необхідну для свого вмісту;
другий рядок займає доступний залишок простору;
третій рядок також підлаштовується під свій вміст.
Значення auto часто використовують для верхньої та нижньої частин макета, а 1fr — для центральної частини.
Якщо елементів більше, ніж рядків описано в grid-template-rows, браузер створить додаткові рядки автоматично.
.grid {
display: grid;
grid-template-rows: 100px 150px;
}Якщо в контейнері буде три або більше елементів, для наступних елементів з’являться неявні рядки.
Їхню висоту можна налаштувати через grid-auto-rows:
.grid {
display: grid;
grid-template-rows: 100px 150px;
grid-auto-rows: 80px;
}У цьому прикладі:
перший рядок має висоту 100px;
другий — 150px;
усі наступні автоматично створені рядки мають висоту 80px.
Однак grid-template-rows використовується саме для явного опису рядків, які ми плануємо в макеті.
repeat()Якщо кілька рядків мають однакову висоту, замість повторення значень можна використати repeat().
.grid {
display: grid;
grid-template-rows: repeat(3, 100px);
}Це означає те саме, що й:
.grid {
display: grid;
grid-template-rows: 100px 100px 100px;
}Функція repeat() робить CSS коротшим і зрозумілішим.
Також можна повторити рядки з гнучким розміром:
.grid {
display: grid;
height: 600px;
grid-template-rows: repeat(3, 1fr);
}У контейнері висотою 600px три рядки поділять доступний простір приблизно порівну.
Для гнучкіших рядків можна використати minmax().
.grid {
display: grid;
grid-template-rows: minmax(100px, 200px) 1fr;
}Перший рядок:
не буде нижчим за 100px;
не буде вищим за 200px.
Другий рядок займе простір, що залишився.
minmax() корисна, коли рядок має залишатися в певних межах, але його розмір може змінюватися залежно від доступного простору.
Ось приклад сітки з трьома рядками:
верхня частина має висоту 70px;
центральна частина займає весь доступний простір;
нижня частина має висоту 50px.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Макет із трьома рядками</title>
<style>
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
min-height: 100%;
}
body {
min-height: 100vh;
}
.page {
display: grid;
grid-template-rows: 70px 1fr 50px;
min-height: 100vh;
}
header {
padding: 20px;
background-color: #264653;
color: white;
}
main {
padding: 20px;
background-color: #f1faee;
}
footer {
padding: 14px 20px;
background-color: #2a9d8f;
color: white;
}
</style>
</head>
<body>
<div class="page">
<header>Заголовок сторінки</header>
<main>
Основний вміст сторінки
</main>
<footer>Нижня частина сторінки</footer>
</div>
</body>
</html>Ключове правило:
grid-template-rows: 70px 1fr 50px;Це означає:
верхній рядок — 70px;
середній рядок — увесь доступний простір;
нижній рядок — 50px.
display: gridgrid-template-rows працює для grid-контейнера. Якщо не вказати display: grid, рядки сітки не створяться.
/* Неправильно */
.container {
grid-template-rows: 100px 200px;
}
/* Правильно */
.container {
display: grid;
grid-template-rows: 100px 200px;
}fr без доступної висотиfr розподіляє доступний простір. Якщо контейнер не має визначеної висоти, результат може відрізнятися від очікуваного.
.grid {
display: grid;
grid-template-rows: 1fr 1fr;
}Для передбачуваного розподілу можна задати висоту контейнера:
.grid {
display: grid;
height: 400px;
grid-template-rows: 1fr 1fr;
}grid-template-rows визначає рядки, тобто горизонтальні смуги;
grid-template-columns визначає колонки, тобто вертикальні смуги.
.grid {
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 1fr 1fr;
}У цьому прикладі описано і рядки, і колонки.
Фіксована висота може бути замалою для тексту або іншого вмісту. Для гнучких макетів часто краще використовувати auto, fr або minmax().
.grid {
display: grid;
grid-template-rows: auto 1fr;
}grid-template-rows визначає рядки grid-сітки та їхню висоту.
Щоб властивість працювала, контейнеру потрібно задати display: grid.
Значення можна задавати в px, fr, auto та інших одиницях.
fr розподіляє доступний простір між рядками.
repeat() скорочує повторення однакових значень.
minmax() задає мінімальну та максимальну висоту рядка.
Додаткові автоматичні рядки можна налаштувати через grid-auto-rows.