Det känns som att CSS Grid har kommit länge nu, men det verkar just nu nå en punkt där folk pratar mer och mer om det och att det blir något vi borde lära oss. Jag började läsa några inlägg och leka med syntaxen de senaste veckorna, men bad min kollega CSS-Trickster Miriam Suzanne att grok genom den med mig på en video-hangout.
Vi tillbringade vår tid med att peka på själva grunderna i CSS Grid och vad vi lärde oss är att det är mycket mindre skrämmande att börja använda det än någon av oss förväntade oss. Vi börjar med ett enkelt exempel och nudlar sedan igenom CSS Grid-egenskaperna för att lära oss vilka andra saker det kan hantera utan att komma för långt i ogräset.
Här är några resurser som vi nämnde under vår chatt som är värda att länka till:
- En komplett guide till rutnät - En omfattande översikt över CSS Grid, inklusive dess egenskaper och en ordlista över viktiga termer och begrepp.
- CodePen Demo - Detta är det enkla exemplet som vi började med i videon och avancerade när vi gick.
- CSS Grid and Grid Highlighter - Detta verktyg nämndes mot slutet och det ger ett sätt att visualisera rutnätet med Firefox DevTools.