I en layout med flera kolumner kan du få element att expandera över kolumnerna med column-span.
h2 ( -webkit-column-span: all; column-span: all; )Tilldela column-spanett element inuti flerkolonnlayouten för att göra det till ett spännande element. Flerkolonnlayouten kommer att återupptas med nästa icke-spännande element.
Värdet på column-spankan antingen vara alleller none.
Ställ in ett element med så column-span: allatt det spänner över kolumnerna.
Värdet noneför egenskapen är dödsbrytaren för ett spännande element. Du kan använda detta när du arbetar med mediefrågor för att berätta för spännande element att sluta spänna.
Se exemplet med kolumnens span-penna av CSS-Tricks (@ css-tricks) på CodePen.
Webbläsarstöd
Firefox stöder inte detta column-span, men det finns intressanta lösningar.
Här är dock stödet för flerkolonnlayout i allmänhet:
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |
Glöm inte dina prefix!