CSS grid-auto-rows — висота неявних рядків ґріда
Властивість grid-auto-rows визначає розмір неявно створених рядків сітки.
У прикладі вище, за допомогою цієї властивості ми визначили висоту для рядків, які не були явним чином виражені через властивість grid-template-rows (ми визначили явно висоту тільки для першого рядку).
Визначає розмір будь-яких автоматично сформованих сіткових доріжок (наприклад, неявних сіткових доріжок). Неявні сіткові доріжки створюються, коли ви явно позиціонуєте рядки або стовпці (за допомогою grid-template-rows або grid-template-columns), що знаходяться поза межами визначеної сітки.
Якщо елемент сітки розміщений у рядку, який за розміром більший за інші рядки сітки - створюються неявні клітинки сітки для його розміщення. Це може статися або шляхом явного позиціонування в рядку, що знаходиться поза межами сітки, або за допомогою алгоритму автоматичного розміщення, створюючи додаткові рядки. Щоб зрозуміти, як створюються сіткові доріжки, подивіться на цей приклад:
.box {
display: grid;
grid-auto-rows: 275px;
}
Властивість також може приймати декілька значень. Наприклад:
.box {
display: grid;
grid-auto-rows: 30px 40px 60px;
}
Загальний опис
автор: NagarD
Синтаксис
grid-auto-rows: <track-size> ...;Властивість grid-auto-rows може отримувати єдине значення:
-
track-size -
Може бути довжиною, відсотком або часткою вільного місця в сітці (за допомогою спеціальної одиниці вимірювання
fr).Також, доступні для використання такі ключові слова, як
max-content(найбільший можливий розмір),min-content(найменший),minmax(min, max)(визначає діапазон розмірів, що перевищує або дорівнюєminі менше або дорівнюєmax).Також існує функція
автор: Svitlanafit-content(min, max), яка означаєmin(max-content, max(auto, argument)).
| Значення без задання: | auto |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.gridAutoRows |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 57 | 70 | 10.1 | 44 | 16 | 10* |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 57 | 57 | 79 | 10.3 |
Приклади
+ запропонувати свій приклад у пісочниці
Динамічний приклад
HTML
<p>У цьому прикладі, Ви можете змінювати значення (розмір у пікселях) для властивості <strong>grid-auto-rows</strong>:</p>
<input type="number" class="input" min="0" value="50">px
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>CSS
body {
font-family: monospace;
font-size: 16px;
line-height: 1.45;
}
.input {
margin-bottom: 36px;
padding: 4px;
font-size: 18px;
}
.box {
height: 100px;
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 40vh;
grid-auto-rows: 50px;
grid-gap: 16px;
}
.box .item {
background-color: rgba(0, 0, 0, .45);
color: #222;
text-align: center;
font-weight: 700;
font-size: 1.25em;
padding: 16px;
}JS
var input = document.querySelector('.input');
var box = document.querySelector('.box');
input.addEventListener('change', function () {
box.style.gridAutoRows = this.value + 'px';
}, false);
//# sourceURL=pen.jsРяди в шаблоні не оголошені — вони виникають самі, і grid-auto-rows чергує їхні висоти: перший 40px, другий 80px.
HTML
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>CSS
.box {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 40px 80px;
gap: 4px;
}
.box div {
background: #0172ad;
color: #fff;
padding: 8px;
}Декілька значень
HTML
<p class="note">Ця властивість може не підтримуватися Вашим браузером!</p>
<div class="box">
<div class="item">30px</div>
<div class="item">40px</div>
<div class="item">60px</div>
<div class="item">30px</div>
<div class="item">40px</div>
<div class="item">60px</div>
</div>CSS
.box {
display: grid;
grid-auto-rows: 30px 40px 60px;
grid-gap: 5px;
}
.box .item {
background-color: tomato;
color: white;
font-size: 1em;
padding: 10px;
text-align: center;
font-family: monospace;
}
.note {
text-align: center;
margin-bottom: 25px;
font-style: italic;
}Результат роботи
HTML
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>CSS
body {
font-family: monospace;
font-size: 15px;
line-height: 15vh;
text-align: center;
}
.box {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 40vh;
grid-auto-rows: 20vh;
grid-gap: 10px;
}
.item {
background-color: tomato;
color: white;
font-size: 4vw;
padding: 10px;
}Обом сіткам задано grid-auto-rows: 90px. У першій усі три ряди оголошені в шаблоні — властивість не робить нічого; у другій оголошено лише перший ряд, решта неявні.
HTML
<p>Усі ряди в шаблоні — <code>grid-auto-rows</code> без роботи:</p>
<div class="grid explicit">
<div>1</div><div>2</div><div>3</div>
</div>
<p>У шаблоні лише перший ряд — другий і третій неявні:</p>
<div class="grid implicit">
<div>1</div><div>2</div><div>3</div>
</div>CSS
.grid {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: 90px;
gap: 4px;
margin-bottom: 14px;
border: 1px solid #999;
font: 13px sans-serif;
}
.grid > div {
padding: 4px;
background: #cfe3f5;
}
.explicit {
grid-template-rows: 30px 30px 30px;
}
.implicit {
grid-template-rows: 30px;
}
p {
margin: 0 0 6px;
font: 13px sans-serif;
}Коментарі
Коментарів ще немає — будьте першим!