In un layout a più colonne, puoi espandere gli elementi attraverso le colonne con column-span.
h2 ( -webkit-column-span: all; column-span: all; )Assegna column-spana un elemento all'interno del layout a più colonne per renderlo un elemento di copertura. Il layout a più colonne riprenderà con il successivo elemento senza estensione.
Il valore di column-spanpuò essere allo none.
Imposta un elemento con column-span: allper allargare le colonne.
Il valore noneper la proprietà è il kill switch per un elemento spanning. Potresti usarlo quando lavori con le media query per dire all'elemento spanning di interrompere lo spanning.
Vedi l'esempio di estensione della colonna della penna di CSS-Tricks (@ css-tricks) su CodePen.
Supporto browser
Firefox non lo supporta column-span, ma ci sono soluzioni interessanti.
Tuttavia, ecco il supporto per il layout a più colonne in generale:
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |
Non dimenticare i tuoi prefissi!