CSS gap (grid-gap) — відстань між колонками й рядками
Властивість grid-gap використовується для скороченого запису grid-column-gap і grid-row-gap, для визначення розміру жолобів між стовпцями та рядками сітки відповідно. Це зручний спосіб встановити сіткові жолоби, не прописуючи кожну властивість окремо.
Приклад використання властивості:
grid-gap: 16px;
/* ідентично до */
grid-gap-rows: 16px;
grid-gap-columns: 16px;
Таким чином, для рядків та стовпців встановлюється жолоб (одне значення).
Якщо ви прописуєте два значення, перше значення встановлює жолоб для рядків, друге значення встановлює жолоб для стовпців:
grid-gap: 16px 32px;
/* ідентично до */
grid-gap-rows: 16px;
grid-gap-columns: 32px;
Загальний опис
автор: NagarD
- Нотатка
-
Зверніть увагу, що властивість
автор: Svitlanagridонулює ці жолоби.
Синтаксис
grid-gap: <'grid-row-gap'> <'grid-column-gap'>;Властивість grid-gap може отримувати єдине значення:
-
<grid-row-gap> <grid-column-gap> -
значення довжини, для
автор: Svitlanagrid-column-gapіgrid-row-gapвідповідно
| Значення без задання: | 0 (для обох підвластивостей) |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.gridGap |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 57 | 52 | 10.1 | 44 | 16 | — | |
| <percentage> values | 66.0 | 52.0 | Не підтримується | 53.0 | 16.0 | Не підтримується |
| calc() values | 66.0 | 52.0 | Не підтримується | 53.0 | Не підтримується | Не підтримується |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 57 | 57 | 52 | 10.3 | |
| <percentage> values | 66.0 | 52.0 | Не підтримується | |
| calc() values | 66.0 | 52.0 | Не підтримується |
Приклади
+ запропонувати свій приклад у пісочниці
Демонстрація роботи
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-gap: 42px;
}
.box .item {
background-color: tomato;
color: white;
font-size: 1.4em;
font-family: monospace;
padding: 16px;
}
.box .item:nth-child(1) {
position: relative;
}
.box .item:nth-child(1)::after,
.box .item:nth-child(1)::before {
content: "42px";
display: block;
position: absolute;
color: #111;
font-size: .77em;
}
.box .item:nth-child(1)::after {
top: 19px;
right: -40px;
}
.box .item:nth-child(1)::before {
bottom: -30px;
right: 41px;
}Два значення: 16px між рядами, 24px між колонками. Сучасна назва властивості — 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-gap: 16px 24px;
}
.box div {
background: #0172ad;
color: #fff;
padding: 8px;
}Динамічний приклад
HTML
<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>grid-gap</strong>:</p>
<p>У цьому прикладі для властивості задаються значення у пікселях (px) у формі: "grid-row-gap grid-column-gap". Одне значення застосовується для двох властивостей відразу.</p>
<input type="number" id="row" class="input" min="0" value="16">px
<input type="number" id="column" class="input" min="0" value="32">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 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-row-gap: 16px;
grid-column-gap: 32px;
}
.box .item {
background-color: tomato;
color: white;
font-size: 1.4em;
font-family: monospace;
padding: 16px;
text-align: center;
}JS
document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
document.querySelectorAll('.box').forEach((n) => n.style.setProperty('grid-gap', document.querySelector('#row').value + 'px ' + document.querySelector('#column').value + 'px'));
}));Динамічний приклад
HTML
<div id="container">
<div id="gridGaps" class="wrap-range">
<p>
<label>grid-rows-gap: <span>1</span>px;</label>
<input type="range" name="gridRowGap" min="0" max="20" value="1">
<p>
<p>
<label>grid-column-gap: <span>1</span>px;</label>
<input type="range" name="gridColumnGap" min="0" max="20" value="1">
<p>
<p class="result" style="display:inline; white-space: nowrap;">grid-gap: <span id="spangridRowGap">1</span>px <span id="spangridColumnGap">1</span>px;</p>
</div>
<div id="list">
<div class="item"><p>1</p></div>
<div class="item"><p>2</p></div>
<div class="item"><p>3</p></div>
<div class="item"><p>4</p></div>
<div class="item"><p>5</p></div>
<div class="item"><p>6</p></div>
<div class="item"><p>7</p></div>
<div class="item"><p>8</p></div>
<div class="item"><p>9</p></div>
<div class="item"><p>10</p></div>
<div class="item"><p>11</p></div>
<div class="item"><p>12</p></div>
<div class="item"><p>13</p></div>
<div class="item"><p>14</p></div>
<div class="item"><p>15</p></div>
</div>
</div>CSS
#list {
display: grid;
grid-template-columns:repeat(5, minmax(auto,100px));
grid-template-rows:repeat(3, 100px);
grid-gap:1px;
grid-auto-flow: column;
margin:1em 0;
}
.result{
font-size: 20px;
font-weight: 700;
color: black;
}
.item {
border-radius:5px;
background-color: red;
display:grid;
}
.item p {
justify-self: center;
align-self: center;
color:white;
font-size: 20px;
}
body {
line-height: 2em;
color:#777;
}
#container{
width:500px;
margin:1em auto;
}
.wrap-range input{
width:60%;
float:right;
margin-top:.5em;
}
label{
display:inline;
white-space: nowrap;
font-size: 20px;
color: black;
}JS
var ranges = document.querySelector("#gridGaps");
var grid = document.querySelector("#list");
var spanRowGap = document.querySelector("#gridRowGap");
var spanColumnGap = document.querySelector("#gridColumnGap");
ranges.addEventListener("input", function (evt) {
var val = evt.target.value;
var span = evt.target.parentElement.querySelector("span");
span.innerHTML = val;console.log(val);
var prop = evt.target.name;
grid.style[prop] = val + "px";
// grid-gap span
var ggSpan = document.querySelector("#span" + prop);
console.log(ggSpan);
ggSpan.innerHTML = val;
}, false);
//# sourceURL=pen.jsОдин gap: 10px 40px — і різні проміжки по вертикалі й горизонталі. Зверніть увагу: біля рамки контейнера відступу немає, gap діє лише між елементами.
HTML
<div class="grid">
<span>1</span><span>2</span><span>3</span>
<span>4</span><span>5</span><span>6</span>
</div>CSS
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* 10px між рядками, 40px між колонками */
gap: 10px 40px;
border: 2px solid #c0392b;
}
.grid span {
padding: 1rem;
text-align: center;
background: #16a085;
color: #fff;
}Коментарі
Коментарів ще немає — будьте першим!