Dans une mise en page à plusieurs colonnes, vous pouvez faire en sorte que les éléments s'étendent sur les colonnes avec column-span.
h2 ( -webkit-column-span: all; column-span: all; )Affectez column-spanà un élément à l'intérieur de la mise en page multi-colonnes pour en faire un élément couvrant. La mise en page multi-colonnes reprendra avec le prochain élément non couvrant.
La valeur de column-spanpeut être allou none.
Définissez un élément avec column-span: allpour qu'il couvre les colonnes.
La valeur nonede la propriété est le kill switch pour un élément spanning. Vous pouvez l'utiliser lorsque vous travaillez avec des requêtes multimédias pour indiquer à l'élément spanning d'arrêter le spanning.
Voir l'exemple Pen column-span par CSS-Tricks (@ css-tricks) sur CodePen.
Prise en charge du navigateur
Firefox ne prend pas en charge cela column-span, mais il existe des solutions de contournement intéressantes.
Voici la prise en charge de la disposition multi-colonnes en général:
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 91 | 87 | dix | 12 | dix |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 | 81 | 10,0-10,2 |
N'oubliez pas vos préfixes!