css властивість column-count

Властивість column-count визначає на скільки стовпчиків має бути розділений текст в багатоколонковому тексті.

Ви можете вказати, щоб кількість стовпців розраховувалася автоматично (тобто auto) або задати певне число (наприклад, 3 для макета з 3-ма стовпцями).

правити

Нотатка

Ви також можете використовувати column- властивості, щоб встановити ширину та кількість стовпців одночасно.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

column-count: number|auto|initial|inherit;

Властивість column-count може отримувати 4 значень:

number

Задає число колонок

автор: Svitlana

правити

auto

Число стовпців буде визначатися іншими властивостями, наприклад: column-width чи column-gap

автор: Svitlana

правити

initial

Встановлює цю властивість в значення без задання

автор: Svitlana

правити

inherit

Успадкує значення властивості від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
column-count	1.0 -webkit-	1.5 -moz-	3.0 -webkit-	11.1	12.0	10

Підтримка: мобільні переглядачі

Переглядач
column-count	1.0 -webkit-	1.0 -moz-	3.0 -webkit-

Приклади

+ запропонувати свій приклад у пісочниці

<div class="cols">Багатоколонкова верстка ділить текст автоматично: браузер сам вирішує, де перервати рядок і почати нову колонку. Що довший текст, то краще видно поділ — тому цей абзац навмисно багатослівний і ще й трохи повторюється, щоб колонкам було чим заповнитися.</div>

.cols {
    column-count: 3;
}