Martin Michálek Martin Michálek  – 11. 1. 2021

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ě.

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.

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 Vlastnost column Počet sloupců a jejich šířka.
columns: 3 20em – maximálně tři sloupce o šířce 20em.
column-gap, column-rule Vlastnost gap a 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 Vlastnost 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 Vlastnost break Zalamování prvků do sloupců.
break-inside: avoid – zabrání zalamování obsahu prvku do více sloupců.
column-span Vlastnost 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í hodnoty vlastnosti display grid se podřízené prvky stávají položkami mřížky a umísťují se do definované mřížky. Hodnota 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…

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?

Dotazník: Jak
se vzděláváte online?
5 minut vašeho času.
Velká pomoc pro nás.
Vyplnit →