Ve vícesloupcovém rozvržení (CSS Multi-column layout) je většinou potřeba změnit výchozí mezeru mezi sloupci nebo přidat oddělovač. K tomu slouží tyto vlastnosti.
Vlastnosti column-gap
a column-rule
patří do specifikace vícesloupcového layoutu – CSS Multi-column Layout.
Je jich hned několik:
column-gap
– nastavení šířky mezery mezi sloupci.column-rule
– definice grafického oddělovače sloupců. Jde o zkratky pro vlastnosticolumn-rule-color
,column-rule-style
,column-rule-width
.
Je dobré vědět, že mezery místo v layoutu zabírají, ale oddělovače nikoliv. Oddělovač jakékoliv šířky neubírá místo mezerám nebo sloupcům v rozvržení. Nedává vám to smysl? Podívejte se na příklad na konci tohoto textu.

Na obrázku jsme definovali mezeru mezi sloupečky o šířce 3em
a k ní ještě přidali šedivý čárkovaný oddělovač .
A co teď? No, co by…? Vzhůru na jednotlivé vlastnosti.
column-gap
: mezera mezi sloupci
Šířka výchozí mezery je 1em
. Pokud to chcete změnit, je pro definici šířky mezery je možné použít vlastnost column-gap
.
Mezeru můžeme definovat také pomocí obecné vlastnosti gap
, kterou asi znáte z flexboxu nebo CSS gridu. Ta zde ale nebude fungovat v Exploreru a ke dni psaní ani v Safari.
Možné hodnoty jsou následující:
auto
nebonormal
– výchozí mezera (1em
).<délka>
– jakákoliv délka, včetně nulové.
→ Související: Jednotky pro tvorbu webu
Záporné hodnoty délky pochopitelně nejsou možné.
column-rule-color
: barva oddělovače
Barvu oddělovače je možné definovat přesně tak, jak jste na to zvyklí u všech možných vlastností. Nebudeme tedy příklady ztrácet čas.
Je ale dobré zmínit, že jako výchozí barva se zde použije currentcolor
, tedy barva textu deklarovaná nebo poděděná pro kontejner vícesloupcového rozvržení.
→ Související: Dědičnost v CSS
column-rule-style
: grafické ztvárnění oddělovače
Grafický styl oddělovače můžete určit stejnými klíčovými slovy jako určujete barvy rámečků: dotted
, dashed
, solid
, double
, groove
, ridge
, inset
nebo outset
.
Grafiku oddělovače je také samozřejmě možné vypnout pomocí hodnoty none
, čímž se pochopitelně vypne i zobrazení oddělovače.
column-rule-width
: šířka oddělovače
I zde se samozřejmě akceptují jakékoliv jednotky šířky, které si v CSS umíte představit, včetně slovních označení thin
, medium
a thick
, která ale pravděpodobně každý prohlížeč vykreslí jinak. V Chrome to dle mých propočtu odpovídá šířce 1, 2 a 5 pixelů.
Výchozí hodnota je medium
.
Oddělovač je samozřejmě možné vypnout. Opět pomocí hodnoty none
, což vás jistě nepřekvapilo.
column-rule
: zkratka pro deklaraci oddělovače na jednom místě
Všechny tři vlastnosti můžete použít v jedné zkratce:
column-rule: <column-rule-width> <column-rule-style> <column-rule-color>
Samozřejmě je možné vlastnosti column-rule-width
nebo column-rule-color
vynechat, vyplývá to z jejich výchozích hodnot. Všechny tyto zápisy by fungovaly:
column-rule: 2px solid blue;
column-rule: 2px solid;
column-rule: solid blue;
Ukázka tří možností použití
Připravil jsem pro vás CodePen, ve kterém si můžete přepínat mezi třemi různými deklaracemi.
- První deklarace (
gap:auto; column-rule:none;
) nastavuje mezeru i oddělovač na výchozí hodnoty, tzn. mezera má šířku1em
a oddělovač se nevykresluje. Všimněte si použití vlastnostigap
namístocolumn-gap
. V moderních prohlížečích je to prostě synonymum. - Druhá deklarace (
gap:3em; column-rule:dotted lightgrey;
) – nastaví trojnásobnou mezeru a tečkovaný oddělovač. Jeho šířku jsem byl líný definovat, takže se použijemedium
. - Třetí deklarace (
gap:3em; column-rule:4em solid lightgrey;
) je záludná – nastaví oddělovač o větší šířce než mezeru. Jasně, asi to hned nepoužijete, to chápu. Chtěl jsem zde totiž ukázat to, co píšu výše – oddělovač si z celkové šířky rodičovského kontejneru nevezmě ani pixel. Vykreslí se doprostřed mezery a když ta mu přestane stačit, neváhá překrývat ani obsah ve sloupcích. Ano, takhle bezzkurpulózní ten oddělovač je…
A jak tyhle legrace můžete využívat v dnešních prohlížečích?
Podpora v prohlížečích
Žádné strachy, vlastnosti column-gap
, column-rule
i všechny ostatní, zde zmíněné, moderní prohlížeče zvládají.
Zvládá je také Internet Explorer. Ten ovšem neumí nahradit column-gap
pomocí gap
. Stejně tak Safari. Ale to je jen malá bolístka jinak výborné podpory.
Více je na CanIUse. caniuse.com/column
Komentujte
Našli jste chybu? Chcete doplnit svůj pohled?
Pište: [email protected]
Sdílení potěší: