Vloupání - Triky CSS | Almanach CSS 2025

Sloupce skvěle odvádějí a vyvažují obsah. Bohužel ne všechny prvky plynou ladně. Někdy se prvky zaseknou mezi sloupci.

Naštěstí můžete prohlížeči říct, aby určité prvky uchovával společně break-inside.

li ( -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; )

V tuto chvíli nemovitost všeobecně přijímá hodnoty autoa avoid.

Použijte avoidna prvek v rozložení s více sloupci, aby se vlastnost nerozpadla.

Podívejte se ještě jednou na syntaxi této vlastnosti, protože mezi prohlížeči existují určité variace.

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */

Vlastnost trvá po vlastnostech zalomení stránky a sdílí stejné hodnoty. Prozatím Firefox používá page-break-inside.

Podívejte se na příklad vloupání sloupce Pen (CSS-Tricks) od Katy DeCorah (@katydecorah) na CodePen.

Podpora prohlížeče

Vlastnosti zalomení stránky:

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.

plocha počítače

Chrome	Firefox	TJ	Okraj	Safari
91	87	11	88	TP

Mobilní / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	14.0-14.4

Podpora rozložení více sloupců:

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.