Kolumny Układ kolumnowy w CSS3

Plansza interaktywna marzec 2015

URL:
http://www.plotkarka.eu/PI/css3-multicol/
Autor:
Radosław Kowaluk

Szerokość i liczba kolumn

Szerokość kolumny
column-width:
length np. 50px; auto;

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi.
Ilość kolumn
column-count:
integer np. 2 auto;

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi.

Kolumny
columns:
column-width || column-count

np. columns: 60px; np. columns: 60px; np. columns: 60px; np. columns: 60px; np. columns: 60px; np. columns: 60px; np. columns: 60px; np. columns: 60px;

np. columns: 3; np. columns: 3; np. columns: 3; np. columns: 3; np. columns: 3; np. columns: 3; np. columns: 3; np. columns: 3;

np. columns: 60px auto; np. columns: 60px auto; np. columns: 60px auto; np. columns: 60px auto;

Właściwości kolumn

Odstęp

Odstęp
column-gap:
length np. 30px; normal;

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi.

Separator

Styl separatora
column-rule-style:
border-style np. double;

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi.

Kolor separatora
column-rule-color:
color np. silver;

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi.

Właściwości kolumn

Szerokość separatora
column-rule-width:
length np. 2px;

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi.

Separator kolumny
column-rule:
column-rule-width||column-rule-style||column-rule-color

np. column-rule: 3px groove; np. column-rule: 3px groove; np. column-rule: 3px groove;

np. column-rule: groove silver; np. column-rule: groove silver; np. column-rule: groove silver;

np. column-rule: 3px groove silver; np. column-rule: 3px groove silver; np. column-rule: 3px groove silver; np. column-rule: 3px groove silver; np. column-rule: 3px groove silver;

Podział przed elementem
page-break-before:
auto; | always; | avoid; | left; | right; | page; | column; | avoid-page; | avoid-column;
Podział po elemencie
page-break-after:
auto; | always; | avoid; | left; | right; | page; | column; | avoid-page; | avoid-column;
Podział w elemencie
page-break-inside:
auto; | avoid; | avoid-page; | avoid-column;

Właściwości kolumn

Wartości stylów podziału
Wartość Opis
auto Nie wymusza podziału przed/za/wewnątrz elementu.
always Wymusza podziału przed/za elementem.
avoid Unika podziału przed/za elementem.
left Wymusza podział przed/za elementem, tak by następna była formatowana jako lewa.
right Wymusza podział przed/za elementem tak, by następna była formatowana jako prawa.
page
column
avoid-page
avoid-column
column-span
column-span:
none; all;
column-fill
column-fill:
auto; balance;

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi.

Właściwości kolumn