CSS Grid - de gids voor het leren van CSS Grid Layouts

10 Min.
CSS Grid Layouts - De complete gids voor het leren van CSS Grid

Flexbox zou inmiddels bij iedereen bekend moeten zijn en heeft al veel ontwikkelaars een rustige nacht bezorgd. Maar wat als je je Flexbox lay-out niet alleen verticaal maar ook horizontaal zou kunnen uitbreiden? Dit en meer is mogelijk sinds de integratie van CSS Grid.

Stel je voor dat er een manier was om je website vrij te ontwerpen in een 2-dimensionaal raster. Bijvoorbeeld door tekstblokken te maken die afbeeldingen gedeeltelijk overlappen. Of nog complexere afbeeldingsgalerijen zonder negatieve marge of positionering. Of je kunt met behulp van CSS snel paginasjablonen ontwerpen die ook responsive zijn. Voor dit alles is er een oplossing: CSS Grid.

Wat is CSS Grid?

Vergelijkbaar met Flexbox, is CSS Grid ook geïntegreerd met behulp van een container element en CSS Grid Items. Zo vinden we ook enkele eigenschappen om de Flexbox te positioneren: align-items, justify items, justify self en align-self. Deze helpen je om de inhoud van je grid overeenkomstig te positioneren.

Grofweg is CSS Grid een flexbox die 2-dimensionaal werkt:

Wat-Is-CSS-Grid
Hoe het gridsysteem met Bootstrap werkt

Terwijl we met Flexbox rijen en bijbehorende kolommen alleen horizontaal kunnen bouwen, kunnen we ze met CSS Grid ook verticaal indelen:

CSS Grid Indeling
CSS Grid is een krachtig hulpmiddel voor het maken van tweedimensionale lay-outs op het internet.

Op het eerste gezicht lijkt CSS Grid relatief onspectaculair. Je kunt immers hetzelfde resultaat bereiken met rijen en kolommen.

Wat maakt CSS Grid zo speciaal?

Met het nieuwe gridsysteem kun je alle denkbare combinaties maken. De enige voorwaarde is dat ze rechthoekig moeten zijn. Zuivere L-vormen kun je bijvoorbeeld niet construeren.

Op deze manier kun je je gehele paginalay-out plannen en bouwen op basis van CSS Grid. Geneste grids zijn net zo goed mogelijk als de combinatie van CSS Grid en Flexbox.

Door slim te plannen, kun je nu ook je lay-outs zo programmeren dat je bijna zonder media queries kunt, maar dat hoeft natuurlijk niet. Ik zal later dieper ingaan op de verschillende mogelijkheden.

CSS Grid komt ook met een aantal andere nieuwe CSS trucs die je leven in de toekomst gemakkelijker zullen maken. Een daarvan is de nieuwe CSS unit: de zogenaamde fraction (fr). Dit werkt op dezelfde manier als het verdelen van de grootte van de Flexbox items. 

Een breuk (1fr) is een deel van een hele rij. Dus als je je grid verdeelt in 3×4, zoals in onderstaand voorbeeld uit CSS Tricks, dan is 1fr = ¼ of 25 %.

Hier duikt ook een andere bijzonderheid op: Niet alle vakjes hoeven gevuld te zijn met inhoud. Je kunt ook lege inhoud toewijzen in de CSS Grid:

CSS-Grid-Empty-Space
Lege inhoud in CSS Grid

W3Schools laat andere mogelijke lay-outs zien waar CSS grids geschikt voor zijn. Op die manier kunnen we gemakkelijk bepalen dat bepaalde elementen horizontaal en verticaal over een bepaald aantal vakjes moeten worden verdeeld. Boxen kunnen verschillende breedtes (kolommen) en hoogtes (rijen) hebben.

CSS Grid Best Layouts
Lay-outs in CSS Grid

In het bovenstaande voorbeeld neemt de eerste kolom procentueel meer breedte in beslag dan de andere. Dit komt omdat de breedte niet vooraf in de CSS gedefinieerd is en daarom automatisch op de inhoud georiënteerd is. Hetzelfde zou gebeuren als we meer inhoud zouden maken dan we vooraf in de CSS hebben gedefinieerd. Dan zou de grid automatisch vergroten en de nieuwe inhoud toevoegen.

Het Duitstalige Einkaufswelten (winkelwerelden) van Shopware is gebaseerd op een CSS Grid-achtig systeem - in ieder geval in de backend-weergave. In hun WYSIWYG editor kan inhoud worden weergegeven in een raster dat op het eerste gezicht erg lijkt op de CSS Grid. In de samengestelde pagina wordt echter geen CSS Grid gebruikt, althans niet standaard.

CSS Grid Best Practices
Herbouwde Shopware startpagina in de Einkaufswelten designer

Sinds 2017 wordt CSS Grid door bijna alle gangbare browsers ondersteund. Alleen de Internet Explorer versies vanaf 10 hebben nog het voorvoegsel ms- nodig om de CSS Grid bijna volledig te kunnen weergeven. Microsoft Edge daarentegen is al volledig geïntegreerd. Nu staat niets je nog in de weg om CSS Grid te gebruiken in je toekomstige projecten:

Defining CSS Grid
Browsers met CSS Grid ondersteuning

Hoe ziet CSS Grid er in de praktijk uit?

Zoals al aangegeven, gebruiken we de basisfunctie op een vergelijkbare manier als de flexbox. Eerst bepalen we een container waaraan we de gridfuncties toewijzen.

.container {
		display: grid;}

Er zijn vele andere waarden die je kunt toekennen om de grid naar je wens op te bouwen:

grid-template-columns, grid-template-rows en grid-template-areas (gezamenlijk kunnen deze ook allemaal worden ingesteld met grid-template). Deze eigenschappen bevatten informatie over het aantal en de grootte van de rijen en kolommen. Je kunt ook de afstanden tussen de rijen en kolommen definiëren met de eigenschappen column-gap en row-gap (of kortweg: gap).

Je hebt ook de mogelijkheid - vergelijkbaar met de flexbox - om de algemene positionering binnen de grid te bepalen. Hiervoor kun je de volgende eigenschappen gebruiken: justify-items, align-items (kort: place-items), justify-content, align-content (kort: place-content).

Met de eigenschap grid-auto-flow kun je ook bepalen in welke richting je raster moet lopen met de waarden row, column of dense. Terwijl row en column respectievelijk voor de horizontale en verticale uitlijning zorgen, bepaalt dense dat je raster economisch gevuld is. Dit betekent dat met deze waarde, de rangschikking van je elementen binnen de grid onder bepaalde omstandigheden kan veranderen om anders lege ruimte op te vullen. Dit is een bijzonder interessante functie voor fotogalerijen. Op die manier schuiven elementen indien nodig op in verschillende schermformaten en ontstaan er geen visuele leemten.

Terwijl je de kolommen en rijen in de container en de afstanden ertussen definieert, gebruikt je de grid items om te bepalen waar ze zich precies in het raster moeten bevinden. 

Een afgewerkt grid zou er dan zo uit kunnen zien aan de CSS kant:

.container {
		display: grid;
grid-template-columns: 40px 1fr 1fr 1fr 40px;
grid-template-rows: 25% 100px auto;
gap: .5rem .8rem
justify-items: stretch;}

Nu je je grid container hebt gemaakt, is het tijd om deze te vullen met de grid items. Het bijzondere van het CSS gridsysteem is dat de indeling in de HTML secundair kan zijn, omdat je elk item een begin- en eindcoördinaat kunt geven. Dit wordt gedaan met grid-column-start, grid-column-end, grid-row-start, grid-row-end.

De coördinaten wijzen naar de gridlijnen en tellen van links naar rechts,  of van boven naar beneden. Deze kunnen ook worden afgekort als grid-colomn en grid-row. 

Gevorderden kunnen ook grid-area gebruiken om deze velden in één keer alle coördinaten te geven of een naam toe te kennen aan het grid item, waarvan je dan zelf de plaatsing in de grid container kunt bepalen. Maar je kunt niet alleen de grid items een naam geven. Het is ook mogelijk om namen toe te kennen aan de rasterlijnen, zodat je de rasterpunten hun coördinaten kunt meedelen met behulp van deze namen. Zo hoef je niet door het grid te tellen.

Ook het gebruik van negatieve waarden, of tellen van links naar rechts, van onder naar boven zijn mogelijk. Deze zijn echter interessanter voor gevorderde gebruikers van de CSS Grid en kunnen hier in detail worden gelezen:

Ten slotte heb je ook de mogelijkheid om de positionering van de inhoud binnen de grid items individueel te bepalen. Dit wordt gedaan met de eigenschappen: justify-self en align-self (in het kort: place-self).

Een grid item in CSS zou er zo uit kunnen zien:

.item-a {
		grid-column-start: 1;
  		grid-column-end: span 4;
  		grid-row-start: 2;
  		grid-row-end: span 2;
align-self: center;}

Grid row-end en grid-column-end kunnen ook worden gebruikt met "span +n". Hier bespaar je jezelf het vervelende tellen van regels. "Span 2" zegt tegen het item dat het zich over twee rastervelden moet uitstrekken. Gedetailleerde uitleg van de individuele eigenschappen is te vinden in de CSS Tricks Guide.

Voorbeelden van het internet

Als je een visueel type bent zoals ik, moet je een aantal voorbeelden uit het echte leven zien om de CSS Grid volledig te begrijpen. Ik heb wat rondgesnuffeld op het internet om sites te vinden die gemaakt zijn met CSS Grid, of die voordeel zouden kunnen hebben van het gebruik ervan.

CSS-Grid-In-Practice
CSS Grid voor het maken van een portfolio

Levon Biss gebruikte de CSS Grid als een implementatietool om zijn portfolio te creëren. Als je zijn site nader bekijkt met het onderzoeksgereedschap, zul je zien dat de site is opgebouwd met geneste gridsystemen. Eerst werd de pagina in drie secties verdeeld: header, main en footer. De hoogte voor de header en de footer werd vooraf bepaald, terwijl het hoofdgedeelte flexibel kan meegroeien met de inhoud met de waarde "auto". De kolommen werden ingesteld op de volledige beschikbare breedte met 1fr.

.page-wrap {
   height: 100%;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 96px auto 72px;
}

De hoofdzaak van zijn site was weer verpakt in een gridsysteem. Merk op hoe de CSS eenheden px en fr hier zijn gemengd. Op deze manier heeft de rand een vaste breedte van 144px, terwijl het middelste deel flexibel blijft.

.gallery-wrap{
   display: grid;
   grid-template-columns: 144px 1fr 144px;
   grid-template-rows: 1fr;
   height: 100%;
}

Tenslotte werd ook de galerij nog eens genest. Voorheen werden geen waarden gegeven voor de grid gaps. Voor de galerij zijn deze nu ingesteld op 1em. Dit bespaart het toevoegen van marge tussen de afbeeldingen. Je kunt de tussenruimten dus eenmalig in het document instellen. 

.grid {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   grid-gap: 1em;
}

Een andere speciale eigenschap van CSS Grid is de repeat() functie. Dit is een verkorte notatie voor het herhalen van waarden. 

Repeat() neemt de reeks te creëren waarden als de eerste waarde en de grootte als de tweede waarde. Uitgeschreven, zou dit er als volgt uitzien:

.grid {
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
CSS-Grid-In-Practice
Voorbeeldwebsite zonder CSS Grid

In dit voorbeeld is geen CSS grid gebruikt. Zoals in het vorige voorbeeld hadden we de grid kunnen nesten of een marge kunnen toevoegen aan de gridcontainer voor de buitenste spatiëring.

Zo zou de rasterverdeling eruit kunnen zien: 

CSS-Grid-Layout
Voorbeeldwebsite met CSS Grid

Een mogelijke benadering van CSS kan er als volgt uitzien:

.container {
  margin: 0.5em 3em;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 100px 80px auto;
	gap: .5rem;
}

.logo {
  grid-area: 1 / 1 / 2 / span 3;
  justify-self: start;
}
.nav {
  grid-area: 1 / 4 / 2 / span 3;
  justify-self: end;
}
.header {
  grid-area: 2 / 1 / 3 / span 6;
  justify-self: center;
}
.logo,
.nav,
.header {
  	align-self: center;
}
.img {
  grid-column: span 2;
  grid-row: span 2;
}
.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
CSS-Grid-Layout
Deze website zou ook kunnen profiteren van CSS Grid

Hoewel de hele Larq website baat zou kunnen hebben bij het CSS Grid, heb ik slechts een klein gebied geselecteerd ter illustratie. Juist hier wordt het voordeel van een tweedimensionaal raster zeer duidelijk.

Zo zou de verdeling van de grid items eruit kunnen zien:

CSS Grid Grid Items
CSS Grid op een voorbeeldpagina

Een mogelijke benadering van CSS kan er als volgt uitzien:

.container {
  margin: 0.5em 5em;
  display: grid;
  grid-template-columns: repeat(3, 1fr) 50px repeat(3, 1fr);
  grid-template-rows: 3rem 20px 100px 100px;
  gap: 1rem;
}

.heading {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 2;
  grid-row-end: 1;
  justify-self: center;
}
.img-a {
  grid-area: 3 / 1 / span 2 / span 1;
}
.img-b {
  grid-area: 3 / 2 / span 1 / span 1;
}
.img-c {
  grid-area: 4 / 2 / span 1 / span 1;
}
.textblock {
  grid-area: -3 / -4 / span 2 / span 2;
  align-self: center;
}

Hoe kunnen CSS Grid en WordPress worden gecombineerd?

Met de nieuwe WordPress editor kan inhoud nu ook standaard in rijen en kolommen worden weergegeven. De lay-out doet me echter meer denken aan bijvoorbeeld Bootstrap en ik mis de tweedimensionaliteit een beetje. Dat dachten anderen waarschijnlijk ook en daarom ontwikkelden zij de plugin Grids: Layout builder for WordPress. De plugin is gratis en doet precies wat het belooft: het stelt je in staat om CSS grids visueel te maken zonder gebruik te hoeven maken van een page builder.

CSS-Grid-Shopify
Het gebruik van de plugin Grids: Layout builder for WordPress

Het bijzondere van CSS Grid is de mogelijkheid van overlapping zonder negatieve marge of absolute positionering te gebruiken. Dit is precies wat mogelijk is met deze plugin. Met behulp van de z-index en ook door de ordening in de grid zelf (het laatste element staat bovenaan, het eerste onderaan) kunnen hiërarchieën worden weergegeven.

Het bovenstaande voorbeeld zou er als website zo uit kunnen zien:

Hoe CSS Grid te gebruiken
CSS Grid als praktisch voorbeeld

CSS Grid en @media query

CSS Grid kan natuurlijk vrij worden gebruikt met Flexbox en Media Query. Er is echter nog een nieuwe functie die CSS Grid mintroduceert: minmax()

Zoals de naam al doet vermoeden, gaat het hier om minimum- en maximumwaarden. Je kunt dit gebruiken in verband met de kolommen. In tegenstelling tot Media Query wordt hier niet de schermgrootte opgevraagd, maar de grootte van het element. Als de box zo sterk krimpt dat hij onder de minimumgrootte komt, vergroten en verplaatsen de elementen zich zodat hij weer past.

Minmax() werkt in combinatie met auto-fit en kan er als volgt uitzien:

.grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

Hier worden kolommen aangemaakt met een minimumgrootte van 240px, maar een maximumgrootte van 1fr. In dit voorbeeld komt 1fr overeen met de volledige breedte van de grid. Hierdoor kunnen meerdere grid-items naast elkaar staan als er ruimte is, maar wordt de hele breedte gebruikt als er niet genoeg ruimte is.

Maar er zijn ook voordelen in verband met de media query. Met behulp van de coördinaten kun je je grid-items voor elk apparaat anders plaatsen en rangschikken. Vooral op mobiel, waar een andere hiërarchie kan heersen dan op de desktop, kan dit een aangename gebruikerservaring opleveren.

Alle speciale functies in een oogopslag

  • FR (fractie) als nieuwe CSS eenheid
  • Grid Areas en lines kunnen namen krijgen
  • Grid-column-end kan gebruikt worden met "span n"
  • Geef dezelfde columns of rows aan met repeat()
  • Grid-items kunnen willekeurig worden gerangschikt (ook overlappend) in het raster

Verdere informatiebronnen over dit onderwerp

Heb je nog andere vragen?

Welke vragen heb je over CSS Grid? We kijken uit naar je commentaar. Ben je geïnteresseerd in webdesign, ontwikkeling en andere WordPress onderwerpen? Volg RAIDBOXES dan op Twitter, Facebook, LinkedIn of via onze nieuwsbrief.

Na haar studie Game Design en Creative Writing in het groene Auckland heeft Sonja Hoffmann zich gespecialiseerd in web- en app-desgign en de ontwikkeling daarvan. Haar focus ligt op gamification en het verkennen van gebruikersmotivatie en ervaring, gekoppeld aan haar passie en nieuwsgierigheid voor technologische trends.

Reacties op dit artikel

Laat een opmerking achter

Jouw e-mailadres zal niet worden gepubliceerd. Verplichte velden zijn met een * gemarkeerd.