Webdeveloper inside: CSS Grid Layout

Het web blijft zich ontwikkelen, vandaag willen wij een nieuwe CSS module behandelen genaamd CSS Grid Layout (Grid). Wat is een CSS grid, wat kan je er mee, wat zijn de verschillen met andere grids en hoe passen wij het toe? Dit zijn allemaal vragen die wij in deze blog zullen beantwoorden, dus lees snel verder.

Wat is een CSS grid?

Een CSS grid is een vooraf gedefinieerde structuur bestaande uit rijen waarbinnen kolommen zijn gedefinieerd. Met een CSS grid bouw je dus een lay-out voor je website, waarbij je telkens in rijen denkt wat inhoudt dat je maar in een één dimensionaal richting werkt.

In het begin van het web gebruikte we tabellen voor de layouts, hierna kwamen er frames, daarna konden we gebruik maken van divjes die we konden uitlijnen. En de laatste jaren gebruikte we een andere CSS module genaamd Flexbox wat ons al wat meer mogelijkheden biedt maar nog steeds maar in een één dimensionaal richting.

Gelukkig brengt Grid hier een verandering in! Zoals gezegd is Grid een nieuwe CSS module en biedt de mogelijkheid om in twee dimensionaal richting te gaan werken qua layout voor je website. In de volgende hoofdstukken zullen wij dieper in de mogelijkheden gaan duiken van Grid, bekijken we wat de verschillen zijn ten opzichte van andere grids en kijken we hoe goed de nieuwe CSS module nu eigenlijk ondersteund wordt in de diverse browsers.

Wat zijn de grootste verschillen ten opzichte van andere grids?

Zoals genoemd in “Wat is een CSS Grid” hebben alle grids een eendimensionale richting waarin ze werken en Grid tweedimensionaal, dit alleen al is een groot verschil en biedt daardoor een makkelijkere oplossing voor het positioneren van je lay-out elementen. In het hoofdstuk “Wat kun je met Grid?” zullen we het visueel plaatje geven hoe dit dan precies eruit kan zien.

Een ander verschil waar je rekening mee moet houden is dat Grid vanuit de lay-out werkt en grids die gebruik maken van Flexbox vanuit de content werken. Dit houdt in dat als je content in Grid plaatst hij op basis van voorgedefinieerde lay-out de content plaatst waarbij dus de breedte van element vast staat maar de hoogte variabel is. In tegenstelling tot Flexbox daar bepaald de content hoeveel ruimte hij nodig heeft om zichzelf te tonen.

Wat kun je met Grid?

CSS Grid is een krachtige functie binnen CSS om twee dimensionale lay-outs te creëren. Je kunt er meerdere verschillende soorten grids mee ontwikkelen. Als eerste gaan we een standaard grid opzetten.

CSS grid | Standaard grid
Je moet eerst opgeven hoeveel kolommen er in een rij komen, daarna hoeveel rijen er in het grid komen. In de onderstaande voorbeeld zien we dat het grid uit 3 kolommen en 4 rijen bestaat. Je hebt de mogelijkheid om de hoogte en breedte vast te definiëren, bijvoorbeeld de kolommen zijn 400px breed en de rijen zijn 300px hoog. Maar wat het mooie is van Grid is dat je alleen hoeft op te geven uit hoeveel kolommen het grid bestaan en met property “fr” rekent het grid zelf uit hoe breed de kolommen moet worden. Voor het gemak hebben we een code-voorbeeld gemaakt zodat je zelf kan zien hoe het werkt.

Het probleem met een eendimensionale grid is als wij de vlakken 8, 9, 11 en 12 rechtsonder willen positioneren dit een probleem oplevert, want je kan voorafgaande vlakken 1 t/m 7 en 10 niet negeren. Maar met een tweedimensionale grid is dit geen probleem. Dit komt omdat het grid bekend is en niet afhankelijk is van de content. Hierdoor kan je opgeven waar het vlak begint en eindigt.

Om aan te geven waar het vlak begint, zou je zeggen dat hij begint bij kolom 1 en rij 2 maar dit is niet het geval. Het grid kijkt niet naar de kolommen of rijen, maar naar de zijden van het vlakt. Dus kolom 1 is de linkerzijde van vlak 1, kolom 2 is de linkerzijde van vlak 2 en ga zo door. Ditzelfde principe geldt ook voor de rijen. De donker grijze lijnen in de bovenstaande afbeelding zijn de startlijnen. Dus als wij vlakken 8, 9, 11 en 12 willen selecteren moeten we beginnen bij kolom 2 en rij 3. Nu de start lijnen bekend zijn moet we de eindlijnen opgeven. En dat is in dit geval kolom 4 en rij 5. En ook hiervoor hebben we een code-voorbeeld gemaakt.

CSS grid | Fluid grid
Nu we de basis hebben bekeken van Grid is het ook een stuk makkelijker om een fluid grid te maken met vaste breedtes. Met fluid bedoelen we dat de grid zich aanpast aan de breedte van het scherm. Dit was al mogelijk met de huidige grid frameworks, maar met CSS Grid wordt het ons een stuk makkelijker gemaakt. Grid brengt een nieuwe eenheid fr met zich mee, fr is de afkorting van fraction. Deze eenheid staat voor de beschikbare ruimte in de grid container. We leggen het uit met een voorbeeld hoe de fr-eenheid van toepassing is op een fluid grid.

Als het grid 1280px breed is en gebruik maakt van de bovenstaande indeling, werkt het als volgend. De buitenkanten hebben een vaste breedte, beide 40 pixels. Als de we 80px van de 1280px afhalen houden we nog 1200px over. Nu passen we de fr-eenheid toe op de elementen 1 t/m 3. Het grid weet dat er 3 elementen zijn met de 1fr. Dus het grid berekent automatisch dat de beschikbare ruimte van de grid container 1200px is, gedeeld door de 3 elementen. Dus dat elk element met de 1fr een breedte krijgt van 400px. Om het visueel te maken hebben we weer een code-voorbeeld beschikbaar gesteld.

CSS grid | Lay-out grid
Nu willen we het in ons opzicht sterkste punt van Grid behandelen en dat is het definiëren van een lay-out. Een goede lay-out opbouwen is altijd een moeilijk proces, maar met Grid wordt het wel heel makkelijk en vooral als je gebruik maakt van grid-areas wat zorgt voor extra overzicht.

De bovenstaande afbeelding toont een redelijke standaard opbouw van een website. Dit gaan we nu stap voor stap opbouwen met Grid. Als eerste moet je kunnen inzien hoe alle rijen en kolommen lopen in de lay-out. De lay-out bestaat uit 3 rijen en 3 kolommen, de aside elementen zijn 200 pixels breed, de footer en header zijn 100 pixels hoog.

We willen dat de ruimte tussen de twee aside element beeld vullend zijn en hoogte tussen de header en footer aanpast aan de content. Dit zit er als volgt uit in code:

code
.page-layout {
display:grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: 100px auto 100px;
}

Nu we de lay-out hebben vastgelegd in rijen en kolommen moeten we de elementen definiëren, dus wat is de header, aside etc.

code
.page-layout__header {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 4;
}
.page-layout__aside {
grid-row-start: 2;
grid-row-end: 3;
}
.page-layout__aside--left {
grid-column-start: 1;
grid-column-end: 2;
}
.page-layout__aside--right {
grid-column-start: 3;
grid-column-end: 4;
}
.page-layout__main {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
}
.page-layout__footer {
grid-row-start: 3;
grid-row-end: 4;
grid-column-start: 1;
grid-column-end: 4;
}

Zoals je hierboven ziet moet je bij elk element zeggen in welke rij het element begint en eindigt en hetzelfde geldt voor de kolommen. Maar het kan een stuk makkelijker met grid areas. Met een grid area kun je kolommen en rijen een naam geven.

code
.page-layout {
display:grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: 100px auto 100px;
grid-template-areas:
“header header header”
“aside-left main aside-right”
“footer footer footer”
}
.page-layout__header {
grid-area: header;
}
.page-layout__aside--left {
grid-area: aside-left;
}
.page-layout__aside--right {
grid-area: aside-right;
}
.page-layout__main {
grid-area: main;
}
.page-layout__footer {
grid-area: footer;
}

Zoals je kunt zien scheelt het aanzienlijk veel code als je grid-template-areas toepast, maar maakt het ook een stuk overzichtelijker. Alleen je moet weten hoe de grid-template-areas werkt. En dat is vrij simpel, alles tussen de haakjes is een rij, als je dit doe “” “” “” heb je drie rijen gedefinieerd. Dit moet overeenkomen met het aantal rijen van de grid-template-rows. En tussen de haakjes ga je de kolommen definiëren, in ons voorbeeld zijn er 3 kolommen. Elke kolom kan je een specifieke naam geven, een spatie zorgt ervoor dat je de volgende kolom kan gaat benoemen. Dus zorg ervoor dat je kolomnamen geen spaties bevatten.

rij-1 :“kolom-1 kolom-2 kolom-3”
rij-2 :“kolom-1 kolom-2 kolom-3”
rij-3 :“kolom-1 kolom-2 kolom-3”

We hebben in Codepen het bovenstaande voorbeeld gemaakt, zodat je nog even terug kan kijken hoe het precies in elkaar zit en hoe het werkt.

Om ons als developers het leven makkelijker te maken, zijn er ook nog een paar nieuwe CSS functies toegevoegd om nog sneller een grid op te zetten.

repeat
De repeat notatie zorgt ervoor dat we niet lange herhalende units hoeven te maken. In de code-voorbeeld hieronder zie je dat de drie keer een kolom van 400px wordt gemaakt en vier rijen van 300px hoog. Helaas supporten nog niet alle browsers deze nieuwe css repeat functie.

code
.grid {
display:grid;
grid-template-columns: repeat(3, 400px);
grid-template-rows: repeat(4, 300px);
}

span
De span waarde kan je alleen gebruiken binnen de grid-row property. Wat de span waarde doet is aangeven om hoeveel kolommen of rows het element zich omsluit. In het voorbeeld hieronder zeggen we dat grid__overlay zich vanaf derde rij twee rijen en vanaf tweede kolom zich twee kolommen moet omsluiten. Voorheen moest je dan aangeven wat eind lijnen waren en met deze optie dus niet. Support van deze CSS waarde is goed, alleen Internet Explorer vraagt om een eigen notatie namelijk -ms-grid-column-span en -ms-grid-row-span.

code
.grid {
display:grid;
grid-template-columns: repeat(3, 400px);
grid-template-rows: repeat(4, 300px);
}
.grid__item {
color: #ffffff;
background-color: #00aecb;
}
.grid__overlay {
grid-row: 3 / span 2;
grid-column: 2 / span 2;
background-color: rgba(249, 249, 249, 0.75);
z-index: 100;
}

grid-gap
De grid-gap property biedt de mogelijkheid om aan te geven wat de tussenruimte moet zijn tussen de verschillende grid elementen. Alle grote browsers ondersteunen deze property alleen Internet Explorer en Safari niet.

Hoe goed wordt Grid ondersteunt in de diverse browsers?

Ondersteuning is altijd een probleem in de front-end wereld, elke browser kiest voor zijn eigen implementatie waardoor je als front-ender prefixes moet gebruiken om gewenste resultaat te krijgen in alle browsers. Bij Grid is dit iets anders want alle grote browsers gebruiken dezelfde specificaties waardoor je geen onnodige prefixes hoeft te gebruiken om het werkend te krijgen.

Hoe goed wordt Grid ondersteunt in de diverse browsers?

Er is alleen één uitzondering, je raad het misschien al en dat is Internet Explorer (IE). IE gebruikt nog een verouderde versie van de Grid implementatie waardoor het niet bruikbaar is zonder prefix of andere property notaties. Ook voor Edge wat ook ontwikkeld is door Microsoft moet je prefixes gebruiken. Alleen de nieuwste versie van Edge heeft correcte implementatie.

Wat wel goed is om te weten is dat als je IE10 en lager wilt supporten je geen gebruik kan maken van Grid. Dit omdat er geen fallbacks te bouwen zijn om de twee dimensionale richting na te bootsen zoals Grid dit doet. Maar je moet je afvragen of je überhaupt nog bezoekers wilt supporten die gebruik maken van een verouderde browser zoals IE10, zelfs Microsoft biedt geen support meer voor oudere browsers dan IE11.

Caniuse toont je een volledige lijst met welke browsers CSS Grid support. Verder geeft de documentatie van specifieke onderdelen ook genoemd in deze blogpost betere inzicht in wat wel mogelijk is en wat niet.

Hoe past CreaBea het toe?

Op dit moment zijn wij druk bezig met een proof of concept van de toepasbaarheid van het CSS Grid. De PoC moet aantonen dat het grid werkbaar is in onze huidige framework en dat hij ook bruikbaar is de diverse browsers. Dit laatste is erg belangrijk want zoals je hebt kunnen lezen in de deze blogpost is de ondersteuning niet in alle browsers gelijk en dienen er fallbacks gemaakt te worden zodat hij overal goed werkt. Als de PoC afgerond is zullen wij onze bevindingen met jullie delen, dus hou onze blog in de gaten.

Geschreven door Bart Bastings, René Tuin
op 27-10-17

0

0

Laat een reactie achter