CSS Grid Layout is een manier om content in rijen en kolommen tegelijk te plaatsen, waarmee je de structuur van een pagina in twee dimensies stuurt. Je definieert de kolommen en rijen één keer, plaatst er vervolgens elementen in, en de browser houdt alles uitgelijnd.
De makkelijkste vergelijking is een spreadsheet of een etalage. Je bepaalt de cellen, laat er je content in vallen, en een kop kan drie kolommen overspannen terwijl een zijbalk in één staat. Vóór Grid betekende dit soort indeling het op elkaar stapelen van onhandige trucs. Nu beschrijven een paar regels de hele vorm van een pagina. Grid hoort bij hetzelfde CSS-gereedschap en past natuurlijk samen met Flexbox, dat de kleinere stukken in één richting binnen elke gridcel regelt.
Eén functie die echt tijd scheelt, is automatische plaatsing. Je kunt Grid een stapel kaarten geven met een regel als ‘vul er zoveel als er comfortabel passen’, en het rekent uit hoeveel er per rij passen en herschikt ze als het scherm verandert, zonder dat je voor elk formaat een aantal opschrijft. Benoemde gebieden helpen ook: je schetst een indeling in gewone woorden door te markeren welk vlak de header, zijbalk en hoofdinhoud is, en de code leest bijna als die schets.
Grid komt echt tot zijn recht bij responsive design. Je kunt de kolommen opnieuw definiëren bij andere schermbreedtes, zodat een driekolomsindeling op desktop netjes inklapt tot één leesbare kolom op een telefoon, zonder je content te dupliceren.
Bij TopDevs gebruiken we CSS Grid als de ruggengraat van pagina-indelingen, zodat de site van een klant zijn structuur op elk apparaat behoudt en makkelijk aan te passen blijft als het ontwerp moet veranderen.
