CSS columns — текст у кілька колонок
Властивість columns - універсальна властивість, яка дозволяє одночасно задати ширину і кількість колонок многоколоночного тексту.
Властивість columns - універсальна властивість і дозволяє одночасно задати значення для наступних css властивостей:
column-widthcolumn-count
Зауважте, що порядок значень дуже важливий. Ви повинні вказати значення в тому ж порядку, як вказано в розділі синтаксису нижче.
автор: Svitlana
Загальний опис
автор: NagarD
Синтаксис
columns: auto|column-width column-count|initial|inherit;Властивість columns може отримувати 5 значень:
-
auto -
Значення без задання. Встановлює значення
автор: Svitlanaautoдляcolumn-widthтаcolumn-count -
column-width -
Встановлює ширину стовпців
автор: Svitlana -
column-count -
Встановлює кількість стовпців
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента.
автор: Svitlana
| Значення без задання: | auto |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.columns="100px 3" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 50 | 52 | 9 | 11.1 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 50 | 50 | 52 | 9 |
Приклади
+ запропонувати свій приклад у пісочниці
Скорочення columns: auto 12em: кількість колонок — скільки вміститься, бажана ширина кожної — 12em. Звузь вікно перегляду — колонки перелаштуються самі.
HTML
<div class="cols">Багатоколонкова верстка ділить текст автоматично: браузер сам вирішує, де перервати рядок і почати нову колонку. Що довший текст, то краще видно поділ — тому цей абзац навмисно багатослівний і ще й трохи повторюється, щоб колонкам було чим заповнитися.</div>CSS
.cols {
columns: auto 12em;
}Приклад використання
HTML
<span>За допомогою універсальної властивості <code>columns</code> ми встановили для цього багатоколонкового тексту такі правила: ширина для стовпчиків <em>auto</em>, а кількість стовпчиків - <em>3</em>. Ми також могли зазанчати дві окремі властивості <code>column-span</code> i <code>column-width</code>.</span>
<div class="multicol">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos exercitationem debitis ipsum laborum nobis quis! Dolorem veritatis itaque distinctio esse iure vitae aspernatur est, vero nihil aperiam fugiat, fuga obcaecati.</p>
</div>CSS
body {
font-family: sans-serif;
line-height: 1.45;
}
p {
margin-top: 0;
}
.multicol {
margin-top: 20px;
background: #eee;
padding: 10px;
-webkit-columns: auto 3; /* Safari and Chrome */
-moz-columns: auto 3; /* Firefox */
columns: auto 3; /* CSS3 */
}
span{
font-size: 16px;
}Обидва блоки — columns: 3. У верхньому картки рвуться між колонками, у нижньому додано break-inside: avoid, і кожна лишається цілою.
HTML
<p>columns: 3</p>
<div class="cols">
<div class="card">Картка 1<br>другий рядок<br>третій рядок</div>
<div class="card">Картка 2<br>другий рядок<br>третій рядок</div>
<div class="card">Картка 3<br>другий рядок<br>третій рядок</div>
<div class="card">Картка 4<br>другий рядок<br>третій рядок</div>
</div>
<p>columns: 3 + break-inside: avoid</p>
<div class="cols keep">
<div class="card">Картка 1<br>другий рядок<br>третій рядок</div>
<div class="card">Картка 2<br>другий рядок<br>третій рядок</div>
<div class="card">Картка 3<br>другий рядок<br>третій рядок</div>
<div class="card">Картка 4<br>другий рядок<br>третій рядок</div>
</div>CSS
.cols {
columns: 3;
column-gap: 20px;
column-rule: 1px solid #ccc;
margin-bottom: 24px;
}
.card {
margin-bottom: 12px;
padding: 8px;
border: 1px solid #0172ad;
background: #f2f8fc;
}
.keep .card {
break-inside: avoid;
}Значення у дії
HTML
<p>Вибери потрібне значення для <code>columns</code>:</p>
<input type="number" class="input" id="width" placeholder="ширина" value="75" min="0">
<input type="number" class="input" id="count" placeholder="кількість" value="3" min="0">
<hr>
<span>Ця властивість визначає мінімальну ширину стовпця, а також кількість власне стовпчиків. Кількість стовпчиків буде максимальною кількістю стовпців, які можуть вміститися у контейнер, без стовпця, що має ширину менше, ніж зазначено для columns. Фактична ширина стовпчика може бути меншою, ніж значення ширини стовпчика, якщо ширина контейнера менша.</span>
<div id="block">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, libero voluptatibus. Hic doloremque odio aliquam ea facilis voluptate deserunt, fugiat velit voluptas? Iusto, possimus ab fugiat error aliquam amet nesciunt.</p>
</div>CSS
* {
box-sizing: border-box;
padding: 0;
}
body {
font-family: monospace;
font-size: 17px;
line-height: 1.5;
color: #222;
}
p {
margin-top: 0;
}
.inputs {
padding: 8px 16px;
font-size: 19px;
}
#block {
margin-top: 20px;
background: #f1f1f1;
padding: 10px;
transition: columns .15s ease-in;
-webkit-column-rule-width: 1px;
-moz-column-rule-width: 1px;
column-rule-width: 1px;
-webkit-column-rule-color: gold;
-moz-column-rule-color: gold;
column-rule-color: gold;
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
-webkit-column-width: 75px;
-moz-column-width: 75px;
column-width: 75px;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
#text {
height: 60px;
background-color: #eee;
padding: 16px 0;
}
message {
display: none;
}JS
document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
console.log(document.querySelector('#width').value + 'px' + document.querySelector('#count').value);
document.querySelectorAll('#block').forEach((n) => n.style.setProperty('columns', document.querySelector('#width').value + 'px ' + document.querySelector('#count').value));
}));Коментарі
Коментарів ще немає — будьте першим!