Vlastnosti column-gap a column-rule: Mezery a oddělovače ve vícesloupcovém rozložení

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.

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 vlastnosti column-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.

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 nebo normal – výchozí mezera (1em).
• <délka> – jakákoliv délka, včetně nulové.

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

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.

1. První deklarace (gap:auto; column-rule:none;) nastavuje mezeru i oddělovač na výchozí hodnoty, tzn. mezera má šířku 1em a oddělovač se nevykresluje. Všimněte si použití vlastnosti gap namísto column-gap. V moderních prohlížečích je to prostě synonymum.
2. 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žije medium.
3. 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