Rozpětí sloupců - Triky CSS

V rozložení s více sloupci můžete prvky rozbalit napříč sloupci pomocí column-span.

h2 ( -webkit-column-span: all; column-span: all; )

Přiřaďte column-spank prvku uvnitř rozložení s více sloupci, aby se stal překlenovacím prvkem. Rozložení s více sloupci se obnoví s dalším prvkem bez překlenutí.

Hodnota column-spanmůže být buď allnebo none.

Nastavte prvek pomocí column-span: all, aby překlenul sloupce.

Hodnota nonevlastnosti je přepínač kill pro spanning element. Můžete to použít při práci s dotazy na média, abyste řekli prvku překlenutí, aby přestal překlenout.

Podívejte se na příklad Pen-span-span span by CSS-Tricks (@ css-tricks) on CodePen.

Podpora prohlížeče

Firefox to nepodporuje column-span, ale existují zajímavá řešení.

Tady je podpora pro vícesloupcové rozložení obecně:

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