Column-count

CSS vlastnost column-count určuje počet sloupců ve sloupcové sazbě.

background
hodnoty počet sloupců

auto

text nebude ve sloupcích, respektive bude jen v jednom sloupci, výchozí stav
2 text se zalomí do dvou sloupců
N text se zalomí do N sloupců

Sloupcová sazba si rozvrhne text prvku na sloupce a postupně je naplní. Pokud není zadáno jinak (přes column-width), rozpočítá dostupnou šířku mezi sloupce tak, aby byly stejně široké. Dále se snaží, aby sloupce byly i přibližně stejně vysoké.

Sloupcovou sazbu nelze bez této CSS vlastnosti udělat, protože CSS neobsahuje žádné možnosti, přelít obsah z jednoho obdélníku (sloupce) do druhého.

Použití na webu je sporné. Lidé si za desetiletí existence internetu zvykli na to, že text se na webu čte shora dolů v jednom širším sloupci. Napadají mě dvě vhodná použití sloupcové sazby:

  1. vyskládání odkazů v patičce do sloupečků
  2. tisková verze pro delší texty

Příklad nastavení dvou sloupců

<div class="sloupce">
    delší text...
</div>

<style>
div.sloupce {
    column-count: 2; /* budou 2 sloupce */
}
</style>

Příklad říká pouze to, že div s class="sloupce" se zalomí do dvou sloupců.

Na jaře 2019 už sloupcová sazba funguje bez prefixů. Dříve se musely používat prefixované vlastnosti -moz-column-count a -webkig-column-count. V prosinci 2015 podporoval zápis bez prefixů jenom Internet Explorer. Proto se musí styl zapisovat s prefixy.

Podpora

Internet Explorer podporuje column-count dobře od verze 10.

U ostatních prohlížečů

Podpora background
Prohlížeč Podpora ve verzích Poznámka
Internet Explorer od verze 10  
Mozilla (Firefox) od verze 52 bez prefixu starší verze s prefixem -moz-
Chrome od verze 50 bez prefixu starší verze s prefixem -webkit-

Další vlastnosti sloupcové sazby

vlastnost sloupcové sazby hodnoty význam vlastnosti
column-count číslo počet sloupců - o tom je tato stránka
column-width délka doporučená šířka jednoho sloupce
columns délka číslo souhrnná vlastnost pro column-width a column-count, např.
columns: 2rem 2;
column-gap délka mezera mezi sloupci - výchozí je 1em
column-rule jako u border vlastnosti oddělovací čáry, souhrnně, např. 1px solid blue
column-rule-color barva barva oddělovací čáry (některé světlé barvy zapsané #rrggbb mi nefungují a zobrazují se jako černá)
column-rule-style styl čáry styl čáry oddělující sloupce - výchozí je none, tedy bez čáry
column-rule-width délka tloušťka oddělovací čáry
column-span 1, all, inherit určuje, přes kolik sloupců se vykreslí stylovaný zanořený prvek. Například odkaz h2 {column-span: all;} ukončí sloupce a vykreslí se na celou šířku stránky. Po prvku budou pokračovat sloupce.

Všechny výše uvedené vlastnosti se dříve musely zapsat třikrát a dvakrát opatřit prefixy. V roce 2019 už prefix potřebují jenom staré Samsungy.

Web není stránkované médium, takže jsem ve zdejších návodech zatím ignoroval CSS vlastnosti break-before, break-after a break-inside. To jsou vlastnosti, které určují, který text nebo obsah se nesmí (případně musí) rozdělit na více stránek. Je to důležité jenom v tiskových verzích. V případě sloupcové sazby je už občas na něco takového potřeba myslet už na webu. Teoreticky by tedy vlastnosti break-* měly mít i hodnoty avoid-column, column a avoid, ale prohlížeče je ještě nepodporují. Na jaře 2019 mi funguje jenom break-inside.

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.