Wanneer u bijvoorbeeld een startpagina maakt en de blokken met links automatisch wilt laten ordenen zonder daarvoor aparte kolommen of containers aan te hoeven maken dan kunt u gebruik maken van CSS 3 columns. Deze functie werkt ook goed wanneer u een grote tekst in meerdere kolommen wilt tonen om de leesbaarheid van de site te vergroten.
De onderstaande code zorgt ervoor dat de kolommen met verschillende hoogtes automatisch de beste ruimte zoeken.
Op deze manier kunt u op een eenvoudige wijze een schone manier een mooie site maken.
<style>
#columns {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
</style>
<div id=”columns”>
<p>blok 1</p>
<p>blok 2</p>
<p>blok 3</p>
</div>
<style>
Wilt u ervoor zorgen dat bepaalde vormen niet worden gebroken? Dan kunt u de volgende code gebruiken voor het specifieke element
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid
In bovenstaand voorbeeld zou dat bijvoorbeeld gebruikt kunnen worden voor het element <p> zodat de gehele blokken bij elkaar blijven en niet over meerdere kolommen worden verdeeld.
De complete CSS zou er dan als volgt uitzien:
<style>
#columns {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
#columns p{
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid
}
</style>
