Het voelt alsof CSS Grid al een hele tijd aan de gang is, maar het lijkt nu een punt te bereiken waarop mensen er steeds meer over praten en dat het iets wordt dat we zouden moeten leren. Ik begon de afgelopen weken een paar posts te lezen en te spelen met de syntaxis, maar ik vroeg mijn collega CSS-Trickster Miriam Suzanne om er samen met mij doorheen te kruipen tijdens een video-hangout.
We hebben onze tijd besteed aan het doorgronden van de basisprincipes van CSS Grid en wat we hebben geleerd is dat het veel minder eng is om ermee te beginnen dan we hadden verwacht. We beginnen met een eenvoudig voorbeeld en banen ons dan een weg door de CSS Grid-eigenschappen om te leren welke andere dingen het aankan zonder al te ver in het onkruid te komen.
Hier zijn een paar bronnen die we tijdens onze chat hebben genoemd en die de moeite waard zijn om naar te linken:
- A Complete Guide to Grid - Een uitgebreid overzicht van CSS Grid, inclusief de eigenschappen en een verklarende woordenlijst van belangrijke termen en concepten.
- CodePen-demo - Dit is het eenvoudige voorbeeld waarmee we begonnen in de video en gaandeweg verder gingen.
- CSS Grid en Grid Highlighter - Deze tool werd tegen het einde genoemd en biedt een manier om de Grid-lay-out te visualiseren met Firefox DevTools.