CSS grid-row-gap — відступ між рядками, row-gap
Властивість grid-row-gap встановлює відступи між рядками сітки.
Ви можете використовувати grid-column-gap для встановлення відступів між стовпчиками або ви можете використовувати властивість grid-gap, щоб одночасно встановити відступи як для рядків, так і для стовпців.
Негативні значення не використовуються.
автор: Svitlana
Загальний опис
автор: NagarD
- Нотатка
-
Зверніть увагу, що властивість
автор: Svitlanagridонулює ці відступи.
Синтаксис
grid-row-gap: <length-percentage>;Властивість grid-row-gap може отримувати єдине значення:
-
<length-percentage> -
Ширина жолоба, що відокремлює рядки у сітці
автор: Svitlana
| Значення без задання: | 0 |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.gridRowGap |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 47 | 52 | 10.1 | 34 | 16 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 47 | 47 | 52 | 10.3 |
Приклади
+ запропонувати свій приклад у пісочниці
Проміжок у 10px є лише між рядами — колонки притиснуті впритул. Сучасніша назва властивості — row-gap.
HTML
<div class="box">
<div>1</div><div>2</div><div>3</div>
<div>4</div><div>5</div><div>6</div>
</div>CSS
.box {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-row-gap: 10px;
}
.box div {
background: #0172ad;
color: #fff;
padding: 8px;
border: 1px solid #fff;
}Демонстрація роботи властивості
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
.box {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 2px;
grid-row-gap: 42px;
}
.box .item {
background-color: tomato;
color: white;
font-size: 1.4em;
font-family: monospace;
padding: 16px;
}
.box .item:nth-child(1),
.box .item:nth-child(2),
.box .item:nth-child(3) {
position: relative;
}
.box .item:nth-child(1)::after,
.box .item:nth-child(2)::after,
.box .item:nth-child(3)::after {
content: "42px";
display: block;
position: absolute;
bottom: -32px;
left: 40%;
color: #111;
font-size: .87em;
}Проміжок стоїть лише МІЖ рядками; порожнє місце по краях дає padding контейнера, а не gap.
HTML
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>CSS
body {
font-family: sans-serif;
padding: 16px;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
/* сучасна назва тієї самої властивості */
row-gap: 28px;
column-gap: 8px;
/* зовнішній простір — це padding, gap його не дає */
padding: 28px;
background: #e6e6e6;
}
.grid div {
background: #bfd8ff;
padding: 18px;
text-align: center;
}Динамічний приклад
HTML
<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>grid-row-gap</strong>:</p>
<p>У цьому прикладі для властивості задаються значення у пікселях (px).</p>
<input type="number" class="input" min="0" value="16" step="5">
<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: 16px;
line-height: 1.45;
}
.input {
margin-bottom: 36px;
padding: 4px;
font-size: 18px;
}
.box {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 2px;
grid-row-gap: 16px;
}
.box .item {
background-color: tomato;
color: white;
font-size: 1.4em;
font-family: monospace;
padding: 16px;
text-align: center;
}
#block {
grid-column-start: 2;
background: gold;
}JS
var input = document.querySelector('.input');
var box = document.querySelector('.box');
input.addEventListener('change', function () {
box.style.gridRowGap = this.value + 'px';
}, false);
//# sourceURL=pen.jsКоментарі
Коментарів ще немає — будьте першим!