CSS Grid Layout (vaak CSS Grid genoemd) is een tweedimensionaal rastergebaseerd lay-outsysteem dat deel uitmaakt van CSS. Het is bedoeld om de lay-out van webpagina’s te vereenvoudigen. Hier is een basisgids over hoe u CSS-rasterindeling kunt gebruiken:
1. Inschakelen van CSS Grid: Om CSS Grid te gebruiken, moet u de display-eigenschap van uw container instellen op ‘grid’ of ‘inline-grid’.
```
.container {
display: grid;
}
```
1. Definieer rijen en kolommen: Gebruik de ‘grid-template-columns’ en ‘grid-template-rows’ eigenschappen om de grootte van de rijen en kolommen te bepalen:
```
.container {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 100px 100px 100px;
}
```
Dit maakt een raster met drie kolommen van elk 200 pixels breed en drie rijen van elk 100 pixels hoog.
1. Plaatsing van items: U kunt de items in uw raster plaatsen met behulp van de ‘grid-column’ en ‘grid-row’ eigenschappen:
```
.item1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
```
Dit plaatst ‘item1’ over de eerste en tweede kolommen van de eerste rij.
1. Grid Gap: Gebruik de ‘grid-gap’ eigenschap om ruimte (gaten) tussen de rastercellen te maken:
```
.container {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
}
```
1. Gebruik ‘repeat()’, ‘auto-fill’ en ‘minmax()’: Deze functies maken het gemakkelijker om responsieve rasters te maken en je code DRY (Don’t Repeat Yourself) te houden.
```
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 10px;
}
```
Dit maakt een responsief raster dat automatisch kolommen van minimaal 200 pixels en maximaal 1 fractie-eenheid breed plaatst.
1. CSS Grid is erg krachtig en heeft nog veel meer opties en eigenschappen om te verkennen, zoals geneste rasters, ‘grid-auto-flow’, ‘align-items’, ‘justify-items’, plaatsing op naam en veel meer.
Vergeet niet om de compatibiliteit van de browser te controleren en dat CSS Grid niet wordt ondersteund door IE10 en sommige andere oudere browsers.
