In einem mehrspaltigen Layout können Sie Elemente über die Spalten hinweg erweitern column-span.
h2 ( -webkit-column-span: all; column-span: all; )Weisen Sie column-spaneinem Element innerhalb des mehrspaltigen Layouts zu, um es zu einem übergreifenden Element zu machen. Das mehrspaltige Layout wird mit dem nächsten nicht übergreifenden Element fortgesetzt.
Der Wert von column-spankann entweder alloder sein none.
Legen Sie ein Element mit fest column-span: all, damit es die Spalten überspannt.
Der Wert nonefür die Eigenschaft ist der Kill-Schalter für ein übergreifendes Element. Sie können dies verwenden, wenn Sie mit Medienabfragen arbeiten, um das Spanning-Element anzuweisen, das Spanning zu beenden.
Siehe das Beispiel für die Spaltenspanne des Stifts mit CSS-Tricks (@ css-Tricks) auf CodePen.
Browser-Unterstützung
Firefox unterstützt dies nicht column-span, aber es gibt interessante Problemumgehungen.
Hier ist die Unterstützung für mehrspaltiges Layout im Allgemeinen:
Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrom | Feuerfuchs | IE | Kante | Safari |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Handy / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |
Vergessen Sie nicht Ihre Präfixe!