Kolom overspanning - CSS-trucs

Inhoudsopgave

In een lay-out met meerdere kolommen kunt u elementen over de kolommen laten uitbreiden met column-span.

h2 ( -webkit-column-span: all; column-span: all; )

Wijs toe column-spanaan een element in de lay-out met meerdere kolommen om er een overspannend element van te maken. De lay-out met meerdere kolommen wordt hervat met het volgende niet-overspannende element.

De waarde van column-spankan ofwel allof none.

Stel een element in met column-span: allom het de kolommen te laten overspannen.

De waarde nonevoor de eigenschap is de kill-schakelaar voor een spanning-element. U kunt dit gebruiken wanneer u met mediaquery's werkt om het spanning-element te laten stoppen met overspannen.

Zie het voorbeeld van de Pen-kolomoverspanning door CSS-Tricks (@ css-tricks) op CodePen.

Browser-ondersteuning

Firefox ondersteunt dit niet column-span, maar er zijn interessante oplossingen.

Hier is echter de ondersteuning voor lay-out met meerdere kolommen in het algemeen:

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.