I en layout med flere kolonner kan du få elementer til å utvides over kolonnene med column-span.
h2 ( -webkit-column-span: all; column-span: all; )Tildel column-spanet element inne i flerkolonnens oppsett for å gjøre det til et spennende element. Flerkolonneoppsettet vil gjenopptas med det neste ikke-spennende elementet.
Verdien av column-spankan enten være alleller none.
Sett et element med column-span: allslik at det spenner over kolonnene.
Verdien nonefor eiendommen er drepebryteren for et spennende element. Du kan bruke dette når du arbeider med mediespørsmål for å fortelle det spennende elementet å slutte å spenne.
Se eksemplet på kolonnespenn for penn av CSS-Tricks (@ css-tricks) på CodePen.
Nettleserstøtte
Firefox støtter ikke dette column-span, men det er interessante løsninger.
Her er støtten for flerkolonnelayout generelt:
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |
Ikke glem prefiksene dine!