CSS Multiple Column: Příručka pro vlastnosti vícesloupcového rozložení

Díky vlastnosti column a dalším definovaným v sadě modulu CSS Multi-column Layout můžeme obsah stránky 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 W3C spíše pro textový a obrázkový 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. Na obrázku vidíte vícesloupcový layout s nastavením columns:20em.

V následující části se tomuto příkladu pořádně 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í. Viděli jste to na obrázku výše.

Když si v CodePenu poklikáte na tlačítka s přiblížením a oddálením, uvidíte, jak to funguje v praxi.

Je to automaticky responzivní, aniž bychom museli definovat Media Queries. Bezva.

Tady jsme ale v příručce o CSS Multicol-Layout. Teď se proto pojďme podívat na vlastnosti spadající do tohoto modulu.

K čemu se vícesloupcový layout 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 a grid nejméně vlastností, 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í.

Anonymní fragmentační kontejnery

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í. Jiné metody rozložení v CSS jako flex nebo grid, pokud jsou použity na nadřazený prvek, mění vlastnosti zobrazení.

Zvažme příklad z gridu. Při použití vlastnosti display s hodnotou grid se podřízené prvky z DOMu stávají položkami 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).

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 to zvládají taky, to víte, že ano. Jen si 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.