Grid Container blok
Met het Grid Container block maak je vrije rasterindelingen op een pagina. Je bepaalt zelf hoeveel kolommen en rijen er zijn, hoe groot elk vak is en waar elk onderdeel in het raster terechtkomt. Elk vak in het raster is een Grid Item dat je vult met gewone WordPress-blokken.
Het Grid Container block is geschikt voor layouts waarbij kolommen of vakken overlappen, of waarbij bepaalde elementen meerdere kolommen of rijen innemen.
Het block toevoegen
Zoek in de blokken-editor op “Grid Container” en voeg het block toe aan de pagina. Het raster is aanvankelijk leeg. Klik op “Add Grid Item” om een eerste vak toe te voegen.
Structuur: container en items
Het block werkt in twee lagen:
- Grid Container — definieert het raster: het aantal kolommen, de ruimte tussen vakken en het algemene gedrag.
- Grid Item — elk afzonderlijk vak in het raster. Je voegt hier de daadwerkelijke inhoud in (tekst, afbeeldingen, andere blokken).
Een Grid Container bevat altijd een of meerdere Grid Items.
Instellingen van de Grid Container
Kolommen
Stel per apparaat in hoeveel kolommen het raster heeft:
| Desktop | 4 | 12 |
| Tablet | 2 | 12 |
| Mobiel | 1 | 6 |
Tussenruimte
Stel de ruimte in tussen kolommen (Kolomspatie) en tussen rijen (Rijspatie). Kies daarna de eenheid: px, rem of em. Standaard is 1 rem voor beide.
Rijhoogte
Bepaal de minimale of vaste hoogte van automatisch aangemaakte rijen:
| Optie | Omschrijving |
|---|---|
| Auto | Rijen worden zo hoog als de inhoud (standaard) |
| Min 50 / 100 / 150 / 200 px | Rijen zijn minimaal de opgegeven hoogte, maar groeien mee met de inhoud |
| Fixed 100 / 150 / 200 px | Rijen hebben altijd een vaste hoogte |
Uitlijning van alle items
- Align Items — verticale uitlijning van alle Grid Items binnen hun rij: begin, midden, einde of uitrekken
- Justify Items — horizontale uitlijning van alle Grid Items binnen hun kolom: begin, midden, einde of uitrekken
Rasterlijnen tonen (alleen editor)
Schakel Rasterlijnen tonen in om in de editor lichtgekleurde hulplijnen te zien die het raster zichtbaar maken. Dit is alleen zichtbaar voor beheerders in de editor en heeft geen effect op de gepubliceerde pagina.
Achtergrondkleur
Kies een achtergrondkleur voor de volledige Grid Container.
Marge en opvulling
Stel de buitenste afstand (marge) en de binnenste ruimte (opvulling) in voor de container. Gebruik de schaalfactoren om marges en opvulling automatisch te verkleinen op tablet en mobiel.
Grid Items beheren
In de zijbalk zie je een overzicht van alle Grid Items in de container. Per item kun je:
- Klikken op het item om het te selecteren in de editor
- Back / Forward — de z-index verlagen of verhogen om bepaalde items voor of achter andere te plaatsen bij overlappende layouts
- Verwijderen via het prullenbak-icoon
Via de knop Add Grid Item voeg je een nieuw vak toe aan het raster.
Instellingen van een Grid Item
Selecteer een Grid Item door erop te klikken in de editor. De instellingen verschijnen in de zijbalk.
Plaatsing
Standaard plaatst het raster items automatisch na elkaar (automatische plaatsing). Schakel Handmatige plaatsing in als je precies wilt bepalen waar een item komt.
Zonder handmatige plaatsing:
Stel per apparaat in hoeveel kolommen en rijen het item inneemt:
- Kolombreedte — over hoeveel kolommen het item zich uitstrekt (standaard 1)
- Rijhoogte — over hoeveel rijen het item zich uitstrekt (standaard 1)
Met handmatige plaatsing:
Stel per apparaat exact de start- en eindpositie in het raster in:
- Kolom start / einde — op welke kolomlijn het item begint en eindigt (
0= automatisch,-1= tot het einde van het raster) - Rij start / einde — op welke rijlijn het item begint en eindigt
Uitlijning van dit item
- Align Self — verticale uitlijning van dit specifieke item binnen zijn cel
- Justify Self — horizontale uitlijning van dit specifieke item binnen zijn cel
Achtergrondkleur
Kies een achtergrondkleur voor dit Grid Item afzonderlijk.
Z-index
Bepaal de stapelvolgorde van dit item ten opzichte van andere items. Handig bij overlappende layouts. Standaard is 0.
Opvulling
Stel de ruimte in aan de binnenkant van het Grid Item (boven, onder, links, rechts). Gebruik de schaalfactoren om de opvulling automatisch te verkleinen op tablet en mobiel.
Inhoud van een Grid Item
Klik in een Grid Item om er inhoud aan toe te voegen. Je kunt elk gewoon WordPress-blok plaatsen: tekst, afbeeldingen, knoppen, SOIL-blokken, enzovoort.
Praktisch gebruik
- Eenvoudig raster — gebruik automatische plaatsing met een kolombreedte van 1 per item voor een uniform raster, vergelijkbaar met een standaard kolomindeling.
- Asymmetrisch raster — geef sommige items een grotere kolombreedte voor een gevarieerde lay-out zonder overlap.
- Overlappende elementen — gebruik handmatige plaatsing en z-index om items over elkaar heen te leggen, bijvoorbeeld een tekstblok over een afbeelding.