CSS column-gap — відстань між колонками
Властивість column-gap задає проміжок між стовпчиками.
Під час роботи зі стовпчиками ви можете помітити, що між кожним стовпчиком є деяка відстань. Браузер встановлює цю відстань в 1em. Як правило, 1em - це зручна відстань для читання. Якщо ви виявили, що ця відстань занадто мала або занадто велика, ви можете встановити її за допомогою властивість column-gap.
Відстань між стовпчиками може бути більшою або рівною 0. Ця відстань може бути будь-якою CSS довжиною, окрім відсотків. Ви можете вказати, щоб проміжок між стовпчиками був нормальним (тобто normal) або певного розміру (наприклад, значення 30px встановить відстань між стовпчиками в 30 пікселів). Якщо вказати відстань між стовпчиками в відсотках - це значення буде проігноровано і відстань буде встановлено в значення без задання.
Пам'ятайте, що відстань між стовпчиками займає деякий простір і витискає вміст стовпчика на наступний розрив (стовпчик).
автор: Svitlana
Загальний опис
автор: NagarD
- Нотатка
-
Якщо встановлено
автор: Svitlanacolumn-rule- лінія з'явиться посередині проміжків.
Синтаксис
column-gap: length|normal|initial|inherit;Властивість column-gap може отримувати 4 значень:
-
length -
Визначає довжину проміжків між стовпцями.
автор: Svitlana -
normal -
Визначає нормальний проміжок між колонками. W3C пропонує значення 1em. Значення без задання.
автор: Svitlana -
initial -
Встановлює цю властивість в значення без задання
автор: Svitlana -
inherit -
Успадкує значення властивості від свого батьківського елемента
автор: Svitlana
| Значення без задання: | normal |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.columnGap="50px" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1.5 | 3 | 11.1 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
Проміжок між колонками — рівно 40 пікселів.
HTML
<div class="cols">Багатоколонкова верстка ділить текст автоматично: браузер сам вирішує, де перервати рядок і почати нову колонку. Що довший текст, то краще видно поділ — тому цей абзац навмисно багатослівний і ще й трохи повторюється, щоб колонкам було чим заповнитися.</div>CSS
.cols {
column-count: 3;
column-gap: 40px;
}Тло контейнера видно лише в проміжках. По краях його немає — крайові відступи додає padding контейнера, а не column-gap.
HTML
<p>Лише <code>column-gap: 24px</code>:</p>
<div class="row">
<div>1</div><div>2</div><div>3</div>
</div>
<p>Той самий рядок плюс <code>padding: 24px</code> на контейнері:</p>
<div class="row pad">
<div>1</div><div>2</div><div>3</div>
</div>CSS
.row {
display: flex;
column-gap: 24px;
margin-bottom: 14px;
background: #f3d9d9;
font: 13px sans-serif;
}
.row > div {
flex: 1;
padding: 12px;
text-align: center;
color: #fff;
background: #0172ad;
}
.pad {
padding: 24px;
}
p {
margin: 0 0 6px;
font: 13px sans-serif;
}Значення у дії
HTML
<p>Вибери потрібне значення для <code>column-gap</code>:</p>
<input type="number" step="15" id="val" placeholder="число" value="0">
<hr>
<div id="block">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>CSS
* {
box-sizing: border-box;
padding: 0;
}
body {
text-align: center;
font-family: monospace;
font-size: 17px;
line-height: 1.5;
color: #222;
}
#form {
padding: 8px 16px;
font-size: 19px;
}
#block {
background: gold;
padding: 10px;
margin-bottom: 36px;
-webkit-column-count: 3; /* Safari and Chrome */
-moz-column-count: 3; /* Firefox */
column-count: 3; /* CSS3 */
-webkit-column-gap: 0px; /* Safari and Chrome */
-moz-column-gap: 0px; /* Firefox */
column-gap: 0px; /* CSS3 */
}
#block>p {
margin: 0px;
border-left: 1px solid #ff00ff;
border-right: 1px solid #ff00ff;
}
#text {
height: 60px;
background-color: #eee;
padding: 16px 0;
}
message {
display: none;
}JS
document.querySelectorAll('#val').forEach((el) => el.addEventListener('change', function () {
var messageText = document.querySelector("message[for='" + this.id + "']");
document.querySelectorAll('#message').forEach((n) => n.textContent = messageText?.textContent ?? '');
document.querySelectorAll('#block').forEach((n) => n.style.setProperty('column-gap', this.value + 'px'));
}));Приклад використання
HTML
<p>За замовчуванням.</p>
<div class="multicol">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<p>Тут ми збільшили проміжок за допомогою властивості <code>column-gap</code>.</p>
<div class="multicol px">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>CSS
.multicol {
font-family: sans-serif;
background: beige;
padding: 10px;
margin-bottom: 16px;
color: #333;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
p {
font-size: 18px;
}
.px {
-webkit-column-gap: 150px;
-moz-column-gap: 150px;
column-gap: 150px;
}Коментарі
Коментарів ще немає — будьте першим!