Właściwość licznika kolumn w CSS

Podziel tekst w elemencie <div> na trzy kolumny:

div {
column-count: 3;
}

Więcej przykładów „Wypróbuj sam” poniżej.

Definicja i użycie

Właściwość column-countokreśla liczbę kolumn, na które należy podzielić element.

Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Liczby, po których następuje -webkit- lub -moz- określają pierwszą wersję, która działała z przedrostkiem.

Property
column-count	50.0 4.0 -webkit-	10.0	52.0 2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit 11.1

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

Value	Description	Play it
number	The optimal number of columns into which the content of the element will be flowed
auto	Default value. The number of columns will be determined by other properties, like e.g. "column-width"
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Określ odstęp 40 pikseli między kolumnami:

div {
column-gap: 40px;
}

Określ szerokość, styl i kolor reguły między kolumnami:

div {
column-rule: 4px double #ff00ff;
}