Wat is een grid in webdesign?
Een grid is een onzichtbaar raster van kolommen waarop je alle onderdelen van je pagina uitlijnt. Je ziet het niet, je merkt het wel.
Pagina’s met een grid ogen rustig. Pagina’s zonder ogen rommelig, ook als je niet kunt aanwijzen waarom.
Het idee komt uit de drukkerij en is daar al een eeuw oud.
Hoe het werkt
Je verdeelt de breedte van je pagina in een vast aantal kolommen met ruimte ertussen. Elk blok begint en eindigt op een kolomgrens.
Daardoor lijnen randen over de hele pagina op elkaar uit. Meer daarover lees je bij design system.
Waarom je oog dat waardeert
Omdat het minder werk is om te lezen. Je oog hoeft niet steeds opnieuw te zoeken waar de volgende regel begint.
Dat is geen smaak maar waarneming.
In de techniek
In de opmaak van je pagina bestaat een gereedschap dat letterlijk grid heet, waarmee je rijen en kolommen definieert.
Dat is de technische uitvoering van hetzelfde idee. Meer daarover lees je bij css.
Mijn vuistregels
- Kies één grid en houd je eraan op je hele site.
- Laat blokken op kolomgrenzen beginnen en eindigen.
- Gebruik dezelfde ruimte tussen kolommen als tussen rijen.
- Wijk alleen bewust af, en dan opvallend.
Die laatste is hoe je nadruk maakt: iets dat buiten het raster valt, springt eruit.
Wat het oplost
Onrust. Als je niet kunt uitleggen waarom een pagina rommelig oogt, ligt het meestal hier.
Meer daarover lees je bij waarom je pagina onrustig oogt.
Bij een paginabouwer
Die werkt vaak al met een raster van twaalf kolommen. Je hoeft dan alleen consequent dezelfde verdelingen te kiezen.
Meer daarover lees je bij of je een grid nodig hebt voor een eenvoudige website.