Grid: de onzichtbare lijnen waar je pagina op rust
Sommige websites voelen rustig zonder dat je kunt aanwijzen waarom. Andere voelen rommelig, terwijl elk onderdeel op zich netjes is. Het verschil zit zelden in de kleuren of de foto’s. Het zit in of alles op dezelfde lijnen staat.
Die lijnen zie je niet, maar je oog ziet ze wel. Staat een kop drie pixels naast de foto eronder? Dan voelt het scheef zonder dat je het benoemt.
Bij Inzichtmakers merkte ik hoeveel dat scheelt. Ik verzorgde daar het webdesign en de vindbaarheid. Op de site staan tekstblokken, kaarten en beeld door elkaar.
Ik heb alles op hetzelfde raster gezet. Dezelfde marge links, dezelfde kolombreedtes, dezelfde afstanden ertussen. Er is niets bijzonders aan te zien, en dat is precies het punt. Het valt pas op als het er niet is.
Een raster is de onzichtbare lijn waarop alles uitlijnt.
Wat is een grid?
Een grid is een onzichtbaar raster van kolommen en rijen waarop je pagina wordt uitgelijnd. Het is geen zichtbaar element, maar een afspraak.
Elk blok begint en eindigt op een lijn van dat raster. Daardoor lopen randen door over je hele pagina. Ook tussen onderdelen die niets met elkaar te maken hebben.
Waarom dat rust geeft
Je oog zoekt patronen. Vindt het die, dan kost lezen minder moeite. Vindt het ze niet, dan blijft er een gevoel van onaf hangen.
uitlijnen is dus geen esthetische luxe. Het scheelt je bezoeker energie, en dat merk je in hoe lang iemand blijft.
Hoeveel kolommen?
De klassieke keuze is twaalf kolommen. Dat getal is populair omdat het deelbaar is door twee, drie, vier en zes.
Je kunt dus halve, derde en kwart breedtes maken zonder te rekenen. Een blok van vier kolommen naast een blok van acht, of drie blokken van vier naast elkaar.
Voor eenvoudige sites werkt zes ook prima. Belangrijker dan het getal is dat je er een kiest en je eraan houdt. Leg dat vast in je design system.
Meebewegen met het scherm
Een raster is niet vast in pixels. Het meebewegen met het scherm betekent dat kolommen smaller worden naarmate het venster krimpt.
Op een bepaald punt houdt dat op te werken. Vier kolommen naast elkaar zijn op een telefoon onleesbaar smal. Dan springen ze onder elkaar, en dat moment bepaal je met een breakpoint.
Hoe ik dat meestal inricht
Desktop: vier blokken naast elkaar.
Tablet: twee naast elkaar, twee eronder.
Telefoon: alles onder elkaar.
Test dat altijd met echte tekst. Een kop van twee woorden past overal, een kop van acht woorden niet.
Grid of flexbox?
In CSS bestaan twee manieren om dit te bouwen. Grid werkt in twee richtingen, dus kolommen en rijen tegelijk. Flexbox werkt in een richting.
Voor een paginaindeling gebruik ik grid. Voor een rij knoppen of een menu gebruik ik flexbox. Ze sluiten elkaar niet uit en je gebruikt ze vaak samen.
Wat een framework hier doet
Veel pakketten leveren een kant-en-klaar raster mee. Handig, maar je krijgt er ook regels bij die je niet vroeg. Meer daarover lees je bij framework.
Heb je het nodig?
Ook voor een eenvoudige site, ja. Al is het maar een vaste marge en drie kolombreedtes.
De witruimte verdelen is trouwens net zo belangrijk als de kolommen zelf. Gelijke afstanden tussen blokken doen meer voor een rustige indeling dan welke kleur ook.
Werk je met een Figma ontwerp, zet dat raster er dan al in. Dan bouw je later na wat er getekend is, in plaats van dat je onderweg gaat schatten.
Let ook op de volgorde
Wat op een groot scherm rechts staat, komt op een telefoon onderaan. Is dat je belangrijkste knop, dan klopt er iets niet.
Controleer die volgorde apart van de vormgeving. Een indeling kan er op elk formaat netjes uitzien en toch de verkeerde prioriteit hebben.
Waar je het herkent
Houd een liniaal tegen je scherm langs de linkerkant van je pagina. Springen koppen, tekst en afbeeldingen allemaal op dezelfde lijn?
Zo niet, dan weet je meteen waar je moet beginnen. Dit is een van de weinige ontwerpproblemen die je zonder kennis zelf kunt aanwijzen.
Meer vragen over Grid
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is een grid in webdesign?
Hoeveel kolommen gebruik je in een grid?
Wat is het verschil tussen grid en flexbox?
Waarom oogt mijn pagina onrustig?
Hoe past een grid zich aan op mobiel?
Heb je een grid nodig voor een eenvoudige website?
Wat is een grid in webdesign?
De klassieke keuze is twaalf. Dat getal is populair omdat het deelbaar is door twee, drie, vier en zes.
Je kunt daardoor halve, derde en kwart breedtes maken zonder te rekenen. Een blok van vier kolommen naast een blok van acht. Of drie blokken van vier naast elkaar.
Voor eenvoudige sites werkt zes ook prima. Bij een site met vooral tekst en een enkele afbeelding heb je twaalf kolommen niet nodig.
Belangrijker dan het getal is dat je er een kiest en je eraan houdt. Een pagina met vier kolommen en de volgende met vijf, daar gaat het mis.
Leg die keuze daarom vast in je design system. Dan weet iedereen die later een pagina bouwt waar hij zich aan houdt, ook zonder overleg.
Kies er een en leg hem vast. Twaalf of zes maakt minder uit dan consequent zijn, want juist het wisselen tussen indelingen maakt een site rommelig.
Hoeveel kolommen gebruik je in een grid?
Een grid is een onzichtbaar raster van kolommen en rijen waarop je pagina wordt uitgelijnd. Het is geen zichtbaar element op je site, maar een afspraak waar iedereen zich aan houdt.
Elk blok begint en eindigt op een lijn van dat raster. Daardoor lopen randen door over je hele pagina, ook tussen onderdelen die inhoudelijk niets met elkaar te maken hebben.
Dat is precies waarom sommige websites rustig voelen zonder dat je kunt aanwijzen waarom. Je oog zoekt patronen, en als het die vindt kost lezen minder moeite.
Staat een kop drie pixels naast de foto eronder, dan voelt het scheef. Niemand benoemt het, iedereen merkt het.
Uitlijnen is dus geen esthetische luxe. Het scheelt je bezoeker energie, en dat zie je terug in hoe lang iemand blijft. Meer over de techniek eronder lees je bij CSS.
Je hoeft geen ontwerper te zijn om dit te herkennen. Houd een liniaal tegen je scherm langs de linkerkant van je pagina en kijk of alles op dezelfde lijn begint.
Wat is het verschil tussen grid en flexbox?
Het zijn twee manieren om een indeling te bouwen, en ze doen net iets anders.
Grid werkt in twee richtingen tegelijk: kolommen en rijen. Je bepaalt vooraf hoe het raster eruitziet en plaatst daarna onderdelen op de plek die je wilt.
Flexbox werkt in een richting. Je zet dingen op een rij of onder elkaar en bepaalt hoe ze de beschikbare ruimte verdelen.
Voor een paginaindeling gebruik ik grid. Voor een rij knoppen, een menu of een kaartje met een icoon naast tekst gebruik ik flexbox.
Ze sluiten elkaar niet uit en je gebruikt ze bijna altijd samen. Het raster van je pagina is een grid, en binnen elk blok zit flexbox.
Als ondernemer hoef je dit niet te kiezen. Het is nuttig om te weten dat er een verschil is als je bouwers erover hoort praten.
Als ondernemer hoef je hier geen keuze in te maken. Het is nuttig om te weten dat er een verschil is als je bouwers erover hoort praten.
Hoe past een grid zich aan op mobiel?
Een raster is niet vast in pixels. Kolommen worden smaller naarmate het venster krimpt, dus het beweegt automatisch mee.
Op een bepaald punt houdt dat op te werken. Vier kolommen naast elkaar zijn op een telefoon onleesbaar smal. Dan moeten ze onder elkaar springen.
Dat moment bepaal je zelf met een breakpoint. Ik richt het meestal zo in: op desktop vier blokken naast elkaar, op tablet twee naast elkaar met twee eronder, op een telefoon alles onder elkaar.
Test dat altijd met je echte tekst en niet met opvultekst. Een kop van twee woorden past overal, een kop van acht woorden niet.
Controleer daarbij ook de volgorde. Wat op een groot scherm rechts staat, komt op een telefoon onderaan. Is dat je belangrijkste knop, dan klopt er iets niet.
Test je indeling altijd met je eigen teksten en niet met opvultekst. Een kop van acht woorden gedraagt zich heel anders dan een kop van twee.
Heb je een grid nodig voor een eenvoudige website?
Ja, ook dan. Al is het maar een vaste marge en drie kolombreedtes.
Juist bij eenvoudige sites valt scheefstand op, want er is weinig om achter te verdwijnen. Een pagina met vijf blokken die allemaal net anders uitlijnen, oogt slordiger dan een drukke pagina die klopt.
De witruimte is trouwens net zo belangrijk als de kolommen zelf. Gelijke afstanden tussen blokken doen meer voor een rustige indeling dan welke kleurkeuze ook.
Werk je met een ontwerp in Figma, zet dat raster er dan meteen in. Dan bouw je later na wat er getekend is, in plaats van dat je onderweg gaat schatten.
Veel pakketten leveren een kant-en-klaar raster mee. Dat werkt, maar je krijgt er regels bij die je niet vroeg. Meer daarover lees je bij framework.
Begin met een vaste marge links en rechts. Dat is de eenvoudigste ingreep en hij zorgt al voor de helft van de rust die je zoekt.
Voelt jouw website onrustig zonder dat je kunt aanwijzen waarom? Stuur me de link via het formulier hieronder. Ik leg een raster over je pagina’s en laat zien waar het uitlijnen misgaat. Vaak zijn het een paar plekken die het hele beeld verstoren. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Raster, kolommenraster, layoutgrid
