Veel designers maken gebruik van een grid als basis van hun ontwerp. De een gebruikt een 12 kolommen indeling, de andere 16 of 24 (of ergens hiertussen). Het maakt in principe niet veel uit welk grid gebruikt wordt, als er maar een gebruikt word. Grid systemen in webontwerpen zijn standaard tegenwoordig en met de implementatie van responsive websites, zijn grid systemen belangrijker dan ooit geworden. Tevens draagt het ook bij aan een uniforme werkwijze in de ontwerp-en realisatie fase van uw website!

Het kiezen van het aantal kolommen is dan ook cruciaal voor de verdere indeling van uw website. Het beste kan een goed deelbaar getal gekozen worden, zoals 12, 24 of 32. Dit kan in de meeste gevallen door 2, 3 en/of 4 gedeeld worden. Zo kunnen er meerdere (grote) kolommen langs elkaar geplaatst worden.

Zie hieronder voor een voorbeeld, hoe deze site is opgebouwd. Hier hebben de kolommen een kleur, om goed aan te geven waar de marges zitten. Maak het scherm ook eens groter en kleiner om te zien wat er gebeurt met bijvoorbeeld de mobiele of tablet versie van deze website.

"Standaard" grid systeem 12 kolommen met responsive

1
1
1
1
1
1
1
1
2
2
2
2
4
4
6
6
12

Wij zorgen meteen voor deze standaarden in uw site en zullen denken aan de mobiele versie en tablet versie, om het uw gebruikers meteen gemakkelijk te maken.

Marges en "nesten" van kolommen

Belangrijk om te weten, is dat marges veelal niet gebruikt kunnen worden om een achtergrond te geven of lijnen door te trekken tot in de marge. Blijf binnen de kolommen, dat kan een kolom zijn of meerdere aaneengesloten. Binnen een [x] aantal kolommen kan ook weer een onderverdeling van kolommen plaatsvinden (zie rechterzijde). Werk dus ten alle tijden binnen het eigen bepaalde grid.

Je kunt bij bepaalde schermformaten ook aangeven of kolommen over de hele breedte moeten gaan of toch maar over de helft. Zo kun je blokken die op groot formaat met z'n vieren naast elkaar staan, op een kleiner formaat toch nog op 2 naast elkaar (of 1) zetten. Optimaal gebruik maken van de ruimte dus!

6
6
3
3
3
3
50%
3
3
3
3