CSS grid-column-gap — застаріле, тепер column-gap
Властивість grid-column-gap встановлює відступи між стовпчиками сітки.
Ви можете використовувати grid-row-gap для встановлення відступів між рядами або ви можете використовувати властивість grid-gap, щоб одночасно встановити відступи як для рядків, так і для стовпців.
Негативні значення не використовуються.
автор: Svitlana
Загальний опис
автор: NagarD
- Нотатка
-
Зверніть увагу, що властивість
автор: Svitlanagridонулює ці відступи.
Синтаксис
grid-column-gap: <length-percentage>;Властивість grid-column-gap може отримувати єдине значення:
-
<length-percentage> -
Ширина жолоба, що відокремлює стовпці у сітці
автор: Svitlana
| Значення без задання: | 0 |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.gridColumnGap |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1.5 | 3 | 11.1 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
Проміжок у 10px є лише між колонками — ряди притиснуті впритул. Сучасніша назва властивості — column-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-column-gap: 10px;
}
.box div {
background: #0172ad;
color: #fff;
padding: 8px;
border: 1px solid #fff;
}Динамічний приклад
HTML
<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>grid-column-gap</strong>:</p>
<p>У цьому прикладі для властивості задаються значення у пікселях (px).</p>
<input type="number" class="input" min="0" value="16">
<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: 16px;
grid-row-gap: 2px;
}
.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.gridColumnGap = this.value + 'px';
}, false);
//# sourceURL=pen.jsДемонстрація роботи властивості
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: 42px;
grid-row-gap: 2px;
padding-top: 25px;
}
.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) {
position: relative;
}
.box .item:nth-child(1)::after,
.box .item:nth-child(2)::after {
content: "42px";
display: block;
position: absolute;
top: 10px;
right: -41px;
color: #111;
font-size: .87em;
}Проміжок 24px між колонками й 8px між рядками. Від червоної рамки контейнера відступу немає — gap працює лише всередині сітки.
HTML
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>CSS
body {
font-family: monospace;
font-size: 15px;
padding: 12px;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 24px; /* колишня grid-column-gap */
row-gap: 8px; /* колишня grid-row-gap */
border: 2px dashed #c1121f;
}
.grid div {
padding: 14px;
text-align: center;
background: #eef6ff;
border: 1px solid #0172ad;
}Коментарі
Коментарів ще немає — будьте першим!