Vlastnost column-span: Překlenutí ve vícesloupcovém rozložení

Martin Michálek – 7. 1. 2021

Vlastnost column-span umožňuje, aby se prvek rozprostřel přes několik sloupců ve vícesloupcovém rozvržení.

CSS vlastnost column-span

column-span patří do specifikace vícesloupcového layoutu – CSS Multi-column Layout.

Možné hodnoty jsou tyto:

none - prvek se nepřeklenuje.
all – prvek se překlenuje přes všechny dostupné sloupce.

Vlastnost je velmi zajímavá pro použití na nadpisy a podobné prvky, které mají oddělovat sekce obsahu.

Jak přesně to funguje? To uvidíte nejlépe v příkladu nebo na obrázku.

CSS vlastnosti column-width, column-count a columns — *Černý prvek se standardně spokojí jen s jedním sloupcem. Dokud mu nenastavíte `column-span:all`.*

Příklad

Máme zde opět náš starý známý kontejner, tentokrát jen mírně upravený:

.container {
  padding: 1rem;
  columns: 15em 3;
}

Vlastnost columns jste už měli příležitost poznat, takže můžete vědět, že prohlížeč vytvoří maximálně tři sloupce a každému poskytne kolem 15em prostoru.

V přepínači nahoře je možné volit mezi dvěma hodnotami pro nadpisy <h2>:

column-span: none neudělá nic. Nebo prostě maže překlenutí získané druhou možností.
column-span: all zapíná překlenutí přes všechny sloupečky Multi-column layoutu.

Poznámka ke splynutí okrajů

Asi víte, že svislé vnější okraje (margin-top a margin-bottom) prvků v běžném textu splývají.

Z příkladu výše pak hezky uvidíte, že v případě nadpisu majícího column-span: all to neplatí. Je to proto, že prohlížeč pokaždé když začne tvořit sloupečkové rozvržení, zároveň vytvoří nový blokový formátovací kontext.

Pokud byste ale umístili dva nadpisy s nastavením column-span: all k sobě, jejich svislé vnější marginy by splývaly.

Podpora v prohlížečích

K mému překvapení je podpora vynikající. Demo z CodePen hezky funguje jak v Chrome, tak v Safari i Firefoxu.

Podle webu CanIUse je vlastnost dostupná také v Internet Exploreru 10 a 11. No výborně. caniuse.com/column-span