voorbeeld css3 grid
Als de ondersteuning van de belangrijkste browsers "nul komma nul" blijft, zal grid een nutteloos item blijven. Mocht jij een gemodificeerde browser gebruiken die wél met grid overweg kan, zal je zien dat deze pagina keurig netjes in verticale kolommen verdeeld is, en dat het plaatje over de twee rechtse 'kolommen' verdeeld staat...
stylesheet van het "grid-gebeuren"
<style>
body{
columns:3;
column-gap:0.5in}
img{
float:page top right;
width:3gr}
</style>
uitleg over het "grid-gebeuren"
Deze pagina is door de stylesheet verdeeld in "vakjes". De grid (op deze pagina) moet je zien als 6 verticale- en 2 horizontale- lijnen. Kijk even naar deze afbeelding wat er bedoeld wordt (de groene lijnen, en de cijfers, staan natuurlijk niet op het eindproduct: ze zijn ter illustratie toegevoegd). Het is duidelijk dat dit soort CSS het stylen van pagina's tot een 'fluitje van een cent' maakt. Toch ga ik pas verder met het geven van voorbeelden en uitleg als de meest belangrijke browsers deze "grid-handel" (gaan) ondersteunen...