De CSS Grid Layout-module maakt het ontwerpen van complexe responsieve webdesignlay-outs eenvoudiger en toegankelijker. Hier zijn de basisstappen om de CSS Grid Layout-module te gebruiken:
1. Geef je container een display van `grid`:
```
.container {
display: grid;
}
```
1. Definieer vervolgens de kolommen en rijen voor je raster. Hiervoor gebruik je de `grid-template-columns` en `grid-template-rows` eigenschappen:
```
.container {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 200px 200px 200px;
}
```
Dit zal een raster maken met 3 kolommen en 3 rijen, elk van 200 pixels.
1. Je kan ook `fr` eenheid gebruiken wat staat voor een fractie van de beschikbare ruimte in de rastercontainer:
```
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 2fr 1fr;
}
```
Dit zal een raster maken met 3 kolommen en 3 rijen, de middelste kolom en rij zal tweemaal zo groot zijn als de anderen.
1. Om je elementen vervolgens op dit raster te plaatsen, gebruik je de `grid-column` en `grid-row` eigenschappen:
```
.item1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
```
Dit plaatst ‘item1’ in de eerste en tweede kolom van de eerste rij.
1. Je kan met `grid-gap` ruimte tussen de rasteritems creëren:
```
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-gap: 10px;
}
```
In deze opzet heeft elk rasteritem een kloof van 10px tussen zijn buren.
Met de bovenstaande stappen heb je de basisstappen voor het gebruik van de CSS-rastersjabloonmodule. Er zijn nog veel meer mogelijkheden met deze krachtige lay-outtool, dus het is de moeite waard om verder te leren om het volledige potentieel ervan te benutten.
