Díky vlastnosti column
a dalším definovaným v sadě modulu CSS Multi-column Layout můžeme obsah vysázet do více sloupců definované šířky podobně jako v novinové sazbě.
Související
Na rozdíl od podobných layoutových modulů – CSS Gridu a flexboxu – navrhli vícesloupcové rozvržení v konsorciu W3 spíše pro obsah, nikoliv pro layout stránek nebo komponent.
Ale kreativitě se samozřejmě meze nekladou. Multi-column Layout má totiž jednu krásnou vlastnost – automatickou responzivitu.

Kouzlo automatického přizpůsobení šířce okna. Vícesloupcový layout s nastavením columns:20em
.
V následujícím příkladu se té responzivitě mrkneme na zoubek.
Příklad k vyzkoušení
V jednoduchém demu máme prvek .container
a v něm nějaký text:
<div class="container">
<h2>
The heading
</h2>
<p>
Lorem ipsum…
</p>
</div>
V CSS jsme pomocí vícesloupcového rozvržení definovali následující:
.container {
columns: 20em;
}
Prohlížeč by pak měl vnitřní prvky kontejneru rozdělit do sloupců o šířce kolem 20em
, což také udělá. Při šířkách okna do zhruba 950 pixelů zde vidíme jeden sloupec.
Od této šířky sloupce v layoutu pořád přibývají.
Když si v CodePenu budete klikat na tlačítka s přiblížením a oddálením (0.5×…), uvidíte, jak to funguje v praxi.
Je to automaticky responzivní, aniž bychom museli definovat Media Queries.
Vlastnosti pro kontejner
Pomocí vlastnosti columns
a dalších definujeme na rodičovském kontejneru podmínky tvorby sloupečků.
To, co je na obrázcích zvýrazněno černě, je předmětem ovlivňování uvedenou vlastností.
Vlastnosti | Co dělají a příklad | |
---|---|---|
column-width , column-count , columns |
![]() |
Počet sloupců a jejich šířka. columns: 3 20em – maximálně tři sloupce o šířce 20em . |
column-gap , column-rule |
![]() |
Definice mezer a oddělovačů mezi sloupci. gap: 3em; column-rule: dotted lightgrey; – mezera 3em , oddělující čára tečkovaná a světle šedá. |
column-fill |
![]() |
Vyvažování výšky sloupců. column-fill: balance – prvky se rozdělí do sloupců a jejich výška bude podobná. |
Vlastnosti pro vnitřní prvky
Prostřednictvím následujících vlastností můžete ovlivnit způsob zalamování obsahu do sloupců a nebo roztažení vnitřních prvků do všech sloupců.
Vlastnosti | Co dělají a příklad | |
---|---|---|
break-before , break-after , break-inside |
![]() |
Zalamování prvků do sloupců. break-inside: avoid – zabrání zalamování obsahu prvku do více sloupců. |
column-span |
![]() |
Prvek může překlenout více sloupců. column-span: all – prvek překlene všechny sloupce. |
Co byste ještě o vícesloupcovém layoutu měli vědět?
Je to už spíše teorie, ale pokud se ji naučíte, může vám to pomoci s pochopením téhle užitečné sady vlastností.
Anonymní fragmentačním kontejnery
Jiné metody rozložení v CSS, pokud jsou použity na nadřazený prvek, mění vlastnosti zobrazení. Například při použití display:grid
se podřízené prvky stávají položkami mřížky a umísťují se do definované mřížky, display:flex
dělá z vnitřních elementů položky flexboxu, které mají specifické chování.
V případě CSS Multi-column Layout však podřízené prvky kontejneru s více sloupci pokračují v normálním toku a ten je uspořádán do několika sloupců. Tyto sloupce mají pružnou velikost ve směru řádků, a proto reagují na dostupné místo změnou velikosti nebo počtu zobrazených sloupců.
Vícesloupcové rozložení zavádí kontext fragmentace tvořený anonymními fragmentačními kontejnery, které se nazývají sloupcové boxy (nebo zkráceně sloupce).
K čemu se hodí?
Kromě „novinové“ sazby textu se hodí také na položky seznamu. Třeba náhledy obrázků ve fotogalerii nebo položky e-shopu…

Weby používající vícesloupcové rozvržení: Learning Log Romana Veselého, program konference PyCon nebo rozvržení položek v navigaci webu OnlineSekáč.cz.
Možností využití je překvapivě hodně a určitě si na nějakou vzpomenete.
Vícesloupcový layout má sice z trojice Multi-column, Flexbox, Grid nejméně možností, na druhou stranu je nejjednodušeji definovatelný, umí si automaticky poradit s šířkou okna a navíc — prohlížeče si s ním velmi dobře rozumí.
Podpora v prohlížečích
Podpora podstatných vlastností vícesloupcového rozvržení je vynikající. Historicky zde exceloval i Internet Explorer, specifikaci CSS Multi-column Layout naimplementoval v podstatě celou už ve verzi 10.
Moderní prohlížeče si jen hůř rozumějí s vlastnostmi break-*
, určenými pro ovládání zalamování vnitřních prvků do sloupců, o čemž píšu v příručce k těmto vlastnostem.
Více najdete na CanIUse. caniuse.com/multicolumn
Komentáře
Váš názor? Vaše zkušenosti? Našli jste chybu?