Css grid

Css grid is een vernieuwende manier voor het indelen van content op website pagina’s. Met behulp van css wordt de uiterlijk van een website bepaald. Doormiddel van een grid is het mogelijk om gemakkelijker de indeling van een pagina aan te passen.

Figuur 1 - Pagina met een titel en 2 blok elementen.

 

Figuur 2 - Pagina van Figuur 1 nu met grid layout. De onderdelen zijn op verschillende plaatsen in het grid gezet. (ook zijn er hulplijnen in het grid getoond

Wanneer een element de lay-out grid krijgt gedraagt dit zich als een soort raamwerk. Hierbij kunnen het aantal rijen en kolommen worden opgegeven (denk hierbij aan een soort tabel). Voor alle elementen in dit grid kan vervolgens aangegeven worden in welke rij en kolom ze staan en hoeveel rijen en kolommen aan ruimte ze moeten innemen. Dit maakt het mogelijk om met alleen css een pagina volledig opnieuw in te delen. Zo zou een element van onderaan de pagina bovenaan gezet kunnen worden of halverwege de pagina. Zie bijvoorbeeld figuur 1 en figuur 2.

Het grid activeren

De volgende styling code zorgt ervoor dat een element in de pagina als grid wordt gebruikt:

body {
        display: grid;
        grid-template-columns: 25% 200px auto;
        grid-template-rows: 30px 90px 50px;
}

In dit geval wordt de body (het hoofd element van de pagina) gebruikt als grid zoals ook in figuur 2 te zien is. Het is echter mogelijk om elk willekeurig element op een pagina aan te passen tot grid. Er kunnen zelfs grids in grids worden geplaatst zodat het raamwerk verder opgedeeld kan worden.

Grid opties

Het eerder genoemde voorbeeld bestaat uit een aantal onderdelen. Als eerst is er de ‘display: grid’ wat verteld aan het element dat het een grid is. Vervolgens zijn er de ‘template-rows’ en ‘template-columns’. Hiermee wordt aangegeven hoeveel rijen en kolommen het grid heeft. Zoals in het voorbeeld te zien is zijn de rijen van dit grid 30 pixels, 90 pixels en 50 pixels hoog. Dit kan uiteraard worden aangepast naar het gewenste aantal pixels. Wanneer hier een waarde aan toegevoegd zou worden (grid-template-rows: 30px 90px 50px 20px) zou het grid dus uit vier rijen bestaan.

Voor de kolommen bij dit grid zijn in plaats van alleen pixels ook een aantal relatieve waardes opgegeven. Zo betekend de 25% dat deze kolom 25% van de ruimte van het originele element in beslag zal nemen. Aangezien het ‘body’ het volledige scherm vult, zal de kolom dus 25% van het scherm innemen. De kolom hierna is 200 pixels breed, ongeacht het scherm waar je de pagina op bekijkt. Tot slot staat er bij de derde kolom de waarde ‘auto’. Hiermee wordt aangegeven dat alle ruimte die over is door de derde kolom in beslag zal worden genomen.

Elementen in het grid plaatsen

We hebben inmiddels een grid maar er staat nog niets in. Hiervoor moet bij het te plaatsen element ook een stukje stijlingscode toegevoegd worden. De volgende code is bijvoorbeeld gebruikt voor de titel in figuur 2:

.title {
        grid-column-start: 1;
        grid-row-start: 2;
        grid-column-end: 3;
        grid-row-end: 3;
}

Hiermee wordt aangegeven dat de titel begint op rij 2, kolom 1. Verder eindigt de titel aan het begin van rij 3 en is de maximale breedte tot kolom 3. De titel zou in dit geval dus 1 rij hoog zijn en 2 kolommen breed. Zie figuur 3.

Figuur 3 - Titel geplaatst in grid zoals in voorbeeld code beschreven staat. Hierbij is de achtergrond kleur van de titel licht grijs gemaakt.

Voordelen

Het verplaatsen en herpositioneren van onderdelen op de pagina doormiddel van css is natuurlijk een geweldige functionaliteit, maar wat is hier het voordeel van ten opzichte van het omdraaien van de html code? En voor een simpele pagina is dat ook zeker waar. Laat de html het structurele werk oplossen en css is voor de extra stijling.

Maar tegenwoordig komt het steeds vaker voor dat binnen één pagina meerdere structuren benodigd zijn. Denk hierbij bijvoorbeeld aan een pagina waar de structuur verander op basis van de acties van de gebruiker of een pagina die zowel geschikt is voor mobiel als desktop. Hierbij is het grid systeem zeker een uitkomst. Bovendien werkt dit zeer goed samen met de mobile first lay-out wat een nieuwe trend wordt bij het bouwen van websites.

Verder is het grid systeem nog steeds in ontwikkeling en worden er nog altijd onderdelen toegevoegd die het werken met grids vereenvoudigen. Zo zijn de voorbeeld rasters in figuur 2 en figuur 3 een nieuwe hulpfunctie van moderne browsers. En wie weet wat er nog meer toegevoegd gaat worden, wij kijken er in ieder geval naar uit.