Het grid-systeem zorgt voor het consistent positioneren van informatie op pagina layouts.
Wat begrijpen we onder een grid-systeem?
Het grid‑systeem vormt de onzichtbare ruggengraat van elke interface. Het zorgt voor heldere, vlot scanbare lay‑out en biedt een voorspelbare structuur waarin alle pagina‑elementen strak op elkaar afgestemd zijn.
De modulaire opzet zorgt voor enorme flexibiliteit: je past dezelfde basis aan naar eigen context, van informatieve websites tot transactionele en data-intensieve applicaties.
Anatomie van het grid-systeem op een pagina
Het grid-systeem bestaat anatomisch uit verschillende deelcomponenten en elementen.
De Region‑component (.vl-region) zorgt voor consistente verticale afstand en ademruimte tussen de onderdelen op je website of applicatie. Een pagina met de modules intro, portfolio, nieuws en contact zal opgebouwd zijn uit vier afzonderlijke regions, elk met hun eigen tussenruimte.
De Layout‑component (.vl-layout) doet dienst als container en zorgt voor correcte marges links en rechts van de pagina.
De Grid‑component (.vl-grid) is het uitgebreide grid-systeem om de informatie op de pagina op te delen in verschillende kolommen (zie verder), vergelijkbaar met het Row-element in Bootstrap, of Columns in Bulma.
De kolommen (.vl-column - onderdeel van de Grid-component) bepalen de opdeling van het grid waarin content en andere componenten worden toegevoegd. De breedte van kolommen wordt bepaald in percentages en schaalt mee met het schermformaat. Het aantal beschikbare kolommen is telkens 12, ongeacht het schermformaat. Een algemene vuistregel is dat de content de breekpunten en het aantal kolommen per viewportgrootte bepaalt.
Gebruik van het grid
Informatieve omgevingen (klassieke websites)
In een content-gedreven site (zoals www.vlaanderen.be) staat navigatie en leesbaarheid centraal. Daarom beperken we de lopende tekst tot 8 – 9 kolommen (± 50–75 tekens per regel). Dat laat in desktop-view nog ruimte voor witmarges of een smalle zijbalk, terwijl op mobiele schermen alles vanzelf op 100 % breedte valt (12 kolommen). De onderliggende 12-koloms structuur blijft beschikbaar voor uitzonderingen (bijv. een 12-koloms banner of een 4-koloms tegeloverzicht), maar de “happy path” is een links uitgelijnde tekst-kolom. Dit sluit perfect aan bij internationale richtlijnen rond optimale regellengte(opent in nieuw venster).
Applicatieve omgevingen (web-app, dashboard, interne applicaties)
Applicaties zijn primair taakgericht: gebruikers willen vooral acties uitvoeren (zoeken, filteren, invoeren) en hebben daarvoor complexe UI‑elementen zoals tabellen, statuspanelen en dergelijke nodig. Om die onderdelen de correcte ruimte te geven, hanteer je het 12-koloms grid in functie van de noden van je applicatie.
Het grid-systeem kan ook toegepast worden binnen een kolom om verdere complexe interfaces uit te bouwen.
Afhankelijk van de type applicatie kan het grid binnen een container of fluid worden toegepast, via de vl-layout component.
Grid-structuur binnen formulieren
Hanteer voor formulieren de form-grid component, een afgeleide van het grid-systeem met kleinere marges en gutters. Alle andere functionaliteit (horizontale en verticale positionering, andere positionering op breakpoints en dergelijke) is exact dezelfde als binnen het standaard grid.
Grid-structuur in een kolom
Het grid-systeem is breder inzetbaar dan een standaard pagina-layout opbouwen. Gebruik het grid binnen een kolom of andere componenten om een opdeling van inhoud te maken binnen de specifieke component-context.
Meer informatie en mogelijkheden
Het grid-systeem vormt in alle websites, applicaties en toepassingen de basisstructuur. Bekijk alle technische mogelijkheden op de technische documentatie(opent in nieuw venster) van de Grid-component.