CSS Grid, een introductie
CSS Grid is een redelijk nieuwe CSS module die het mogelijk maakt om in een soort raster een layout te maken.
Zo'n raster of grid bestaat uit rijen en kolommen en je kunt elementen plaatsen in dit grid. Per element kun je aangeven hoeveel rijen breed en hoeveel kolommen hoog het moet zijn.
Hoe werkt CSS Grid
Hieronder zal ik een aantal voorbeelden laten zien van hoe CSS Grid werkt. Eerst zullen we een simpele HTML structuur opzetten met onderstaande code:
<div class="grid-container">
<div class="grid-item">Blok 1</div>
<div class="grid-item">Blok 2</div>
<div class="grid-item">Blok 3</div>
<div class="grid-item">Blok 4</div>
<div class="grid-item">Blok 5</div>
<div class="grid-item">Blok 6</div>
</div>
Dit ziet er in de browser als volgt uit:
Grid kolommen
We zullen nu in de CSS code aangeven dat de class grid-container getoond moet worden als een grid. Dit doen we als volgt:
.grid-container {
display: grid;
}
Wanneer je nu het HTML bestand weer in de browser zou bekijken, dan zou je geen verschil zien. Maar, door bovenstaande CSS code hebben we de div met de class grid-container wel geschikt gemaakt voor een grid weergave.
Je zou overigens ook display:inline-grid kunnen gebruiken om een inline weergave te maken (voor uitleg over block en inline, zie: de website van W3schools).
Laten we nog wat styling toevoegen aan de class grid-item om het geheel wat duidelijker in beeld te krijgen:
.grid-item {
border:solid 1px #333;
background-color: #0099ff;
}
Dit levert het volgende resultaat op:
Laten we nu eens wat kolommen gaan maken. We gaan dit doen door de CSS code voor de class grid-container uit te breiden. Met de onderstaande CSS code maak je drie kolommen aan:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
}
Merk op dat er automatisch twee rijen ontstaan, aangezien onze HTML code uit 6 blokken bestaat. Er ontstaan dus twee rijen van drie kolommen. Zie onderstaande afbeelding:
Doordat de de breedte op auto hebben gezet, worden de kolommen even breed. We kunnen uiteraard ook een breedte in pixels of percentages gebruiken:
.grid-container {
display: grid;
grid-template-columns: 25% 50% 25%;
}
In de onderstaande afbeelding zie je het resultaat:
We hebben nu drie kolommen, omdat we voor de eigenschap grid-template-columns drie waardes hebben opgegeven. Zouden we zes waardes opgeven, dan onstaan er 6 kolommen:
.grid-container {
display: grid;
grid-template-columns: 100px 100px 200px 200px 50px 50px;
}
Je ziet dat ik nu 6 waardes heb toegekend aan de eigenschap grid-template-columns. Ik heb deze alle 6 een breedte in pixels gegeven. Het resultaat is dat er zes kolommen ontstaan met de hierboven ingestelde breedte (zie afbeelding):
Grid rijen
Naast de eigenschap grid-template-columns kun je ook de eigenschap grid-template-rows gebruiken. Stel je wilt dat de rijen in je grid 200px hoog zijn, dan kun je dit doen door de eigenschap grid-template-rows de waarde 200px te geven.
De CSS code ziet er dan als volgt uit:
.grid-container {
display: grid;
grid-template-columns: auto auto auto
grid-template-rows:200px;
}
In de browser ziet dit er als volgt uit:
Je ziet dat die 200px alleen voor de bovenste rij geldt. Zou je de tweede rij 100px hoog willen zijn, dan kun je dit als tweede waarde gebruiken bij de eigenschap grid-template-rows.
.grid-container {
display: grid;
grid-template-columns: auto auto auto
grid-template-rows:200px 100px;
}
Dit resulteert dus in:
De ruimte tussen de grid items
Zoals we het tot nu toe hebben gemaakt, staan de items in het grid meteen tegen elkaar aan. Met de eigenschap grid-gap kunnen we bepalen hoe ver de items van elkaar vandaan moeten komen te staan.
In het onderstaande voorbeeld gebruiken we een grid gap van 20px:
.grid-container {
display: grid;
grid-template-columns: auto auto auto
grid-template-rows:200px 100px;
grid-gap:20px;
}
Dit levert de volgende weergave op in de browser:
Grid items
De items die zich in een grid container bevinden, noem je de grid items. Let wel, alleen de directe kinderen van een grid container zijn grid items.
Als je naar de volgende HTML code kijkt:
<div class="grid-container">
<div class="grid-item">Blok 1</div>
<div class="grid-item">Blok 2</div>
<div class="grid-item">Blok 3</div>
<div class="grid-item">Blok 4</div>
<div class="grid-item">Blok 5</div>
<div class="grid-item">Blok 6</div>
</div>
Dan zijn de divs met de class grid-item directe kinderen van de div met de class grid-container. Het zijn dus grid items.
Zou je in een grid item weer een HTML element aanmaken, dan is dit element geen grid item. Dus, bij de onderstaande HTML code zie je dat we in het eerste blok een h2 koptekst aanmaken. De div grid-item is inderdaad een grid item. Maar de h2 koptekst is geen direct kind van de grid container (het is een direct kind van het grid item) en is daardoor dus geen grid item.
<div class="grid-container">
<div class="grid-item"><h2>Blok 1</h2></div>
<div class="grid-item">Blok 2</div>
<div class="grid-item">Blok 3</div>
<div class="grid-item">Blok 4</div>
<div class="grid-item">Blok 5</div>
<div class="grid-item">Blok 6</div>
</div>
Grid items plaatsen in het grid
Je kunt grid items in het grid plaatsen. Het maakt daarbij niet uit in welke volgorde een item genoteerd is in de HTML code. Je zou dus een item wat later in de HTML code aangemaakt wordt eerder in het grid kunnen plaatsen dan een item dat eerder is aangemaakt in de HTML code.
Laten we nieuwe HTML code gaan aanmaken, waarin we een grid container aanmaken:
<div class="grid-container">
</div>
We maken nu nog geen grid items aan, we gaan eerst met CSS regelen hoe het grid eruit komt te zien:
.grid-container {
display:grid;
grid-template-columns: auto auto auto;
grid-template-rows:200px 200px 200px;
grid-gap:20px;
background-color:#999;
}
We maken dus een grid aan van 3 kolommen die allemaal even breed zijn en drie rijen van 200px hoog.
We gaan nu een eerste grid item aanmaken in onze HTML code:
<div class="grid-container">
<div class="grid-item1">
<p>Grid Item 1</p>
</div>
</div>
We gaan vast de volgende styling regelen met CSS:
.grid-item1 {
background-color:#0099ff;
color:#fff;
font-weight:bold;
}
In de browser ziet dit er als volgt uit:
Stel nu dat we dit grid item heel precies in het grid willen plaatsen, en wel aan de rechterkant, dan zouden we dit met de eigenschap grid-column-start kunnen regelen. Deze eigenschap telt de kolom rijen. Bij een grid met drie kolommen heb je dus 4 kolom rijen (zie afbeelding):
Ik heb voor het gemak de lijnen nu even kolomlijnen en rijlijnen genoemd, maar eigenlijk heten ze grid lines.
Om nu grid item 1 rechts te plaatsen, zetten we de eigenschap grid-column-start dus op 3:
.grid-item1 {
background-color:#0099ff;
color:#fff;
font-weight:bold;
grid-column-start:3;
}
En zie in de browser dat grid item 1 inderdaad rechts op het grid geplaatst wordt:
Zou ik nu grid item 1 pas op de tweede rij willen laten starten, dan kan ik de eigenschap grid-row-start gebruiken. In onderstaand voorbeeld gebruik ik de eigenschappen grid-row-start en grid-row-end om grid item 1 op de tweede rij te plaatsen en helemaal te laten doorlopen naar de onderkant van het grid:
.grid-item1 {
background-color:#0099ff;
color:#fff;
font-weight:bold;
grid-column-start:3;
grid-row-start:2;
grid-row-end:4;
}
En dit is het resultaat in de browser:
Laten we nu in de HTML code een tweede grid item aanmaken:
<div class="grid-container">
<div class="grid-item1">
<p>Grid Item 1</p>
</div>
<div class="grid-item2">
<p>Grid Item 2</p>
</div>
</div>
En we geven grid item 2 de volgende CSS code:
.grid-item2 {
background-color:#ff5722;
color:#fff;
font-weight:bold;
grid-column-start:1;
grid-column-end:3;
grid-row-start:1;
grid-row-end:3;
}
Zie hoe met de eigenschappen grid-colum-start en grid-column-stop en grid-row-start en grid-row-end exact de positie van grid item 2 op het grid bepaald wordt.
In de browser ziet dit er zo uit:
Je ziet dat grid item 2 eerder in het grid wordt getoond dan grid item 1, ondanks dat de volgorde in de html code is: eerst grid item 1 en dan grid item 2.
Mocht je nu aparte indelingen willen voor verschillende beeldscherm breedtes, dan zou je dit met media queries kunnen regelen.
CSS Grid in Wordpress
Je zou de CSS Grid technologie in Wordpress kunnen gebruiken. Je zou bijvoorbeeld een thema kunnen maken waarbij je geen gebruik maakt van een framework als Bootstrap maar helemaal gebruik maakt van CSS Grid.
Ook zou je CSS grid kunnen gebruiken voor de opmaak en layout van pagina's en berichten.
CSS Grid in Joomla
Voor Joomla geldt hetzelfde als voor Wordpress. Je zou je hele Joomla template kunnen bouwen met CSS Grid of je zou artikelen kunnen opmaken met CSS Grid.
Voor de toekomst van Joomla, Joomla 4 zal CSS Grid ondersteunen. Het standaard meegeleverde frontend template in Joomla 4 is opgebouwd met CSS Grid.
Meer informatie over CSS Grid
Mocht je nu meer willen weten over CSS Grid, kijk dan vooral een op deze website: W3Schools - CSS Grid.
Behalve meer uitleg, kun je op deze pagina ook informatie vinden over bijvoorbeeld browser support voor CSS Grid.
Heel veel succes met het experimenteren met CSS Grid!