I et layout med flere kolonner kan du få elementer til at udvides på tværs af kolonnerne med column-span.
h2 ( -webkit-column-span: all; column-span: all; )Tildel column-spanet element inde i layoutet med flere søjler for at gøre det til et spændende element. Multikolonnelayoutet genoptages med det næste ikke-spændende element.
Værdien af column-spankan enten være alleller none.
Indstil et element med, column-span: allså det spænder over kolonnerne.
Værdien nonefor ejendommen er kill switch for et spændende element. Du kan bruge dette, når du arbejder med medieforespørgsler for at fortælle det spændende element at stoppe spændingen.
Se eksemplet med kolonne-span-pen af CSS-Tricks (@ css-tricks) på CodePen.
Browsersupport
Firefox understøtter ikke dette column-span, men der er interessante løsninger.
Her er understøttelsen af Multi-column layout generelt dog:
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |
Glem ikke dine præfikser!