CSS
Kolumny

Składnia

• liczba kolumn: auto | liczba | dziedziczenie | początkowa | niezbrojona;
• szerokość kolumny: auto | length;
• column: [szerokość kolumny] | [liczba kolumn];
• rozpiętość kolumny: brak | wszystkie | dziedziczenie | początkowy | niezbrojony;
• odstęp między kolumnami: normalny | długość | dziedziczenie | początkowy | niezbrojony;
• wypełnienie kolumny: auto | balance | dziedziczenie | intial | unset;
• column-rule-color: color | inherit | initial | unset;
• kolumna-styl: brak | ukryty | kropkowany | przerywany | bryłowy | podwójny | rowek | kalenica | wstawka | początek | dziedziczenie | początkowy | rozbrojony;
• kolumna-szerokość-szerokość: cienki | średni | gruby | długość | dziedziczenie | początkowy | niezbrojony;
• kolumna-reguła: [kolumna-reguła-szerokość] | [kolumna-reguła-styl] | [kolumna-reguła-kolor];
• break-after: auto | zawsze | lewy | prawy | recto | verso | strona | kolumna | region | unikanie | unikanie-strona | unikanie-kolumna | unikanie-region;
• break-before: auto | zawsze | lewy | prawy | recto | verso | strona | kolumna | region | unikanie | unikanie-strona | unikanie-kolumna | unikanie-region;
• włamanie: auto | Unikaj | Unikaj strony | Unikaj kolumny | Unikaj regionu;

Prosty przykład (liczba kolumn)

Wielokolumnowy układ CSS ułatwia tworzenie wielu kolumn tekstu.

Kod

<div id="multi-columns">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. 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</div>

.multi-columns {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}

Wynik

Szerokość kolumny

Właściwość column-width określa minimalną szerokość kolumny. Jeśli liczba column-count nie zostanie zdefiniowana, przeglądarka dokona tyle kolumn, ile zmieści się w dostępnej szerokości.

Kod:

<div id="multi-columns">
    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. 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
</div>

.multi-columns {
  -moz-column-width: 100px;
  -webkit-column-width: 100px;
  column-width: 100px;
}

Wynik