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

Č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
Komentujte
Našli jste chybu? Chcete doplnit svůj pohled?
Pište: [email protected]
Sdílení potěší: