Lär CSS Grid Layout (The Fun Way) med Grid Garden

De flesta webbutvecklare känner till Flexbox Froggy-spelet som lär dig grunderna för flexbox från början. Detta gratis spel gick viralt och det är fortfarande otroligt värdefullt för att lära människor hur man kodar med flexbox.

Tja, samma utvecklare som gjorde det spelet har ett helt nytt spel kallad Grid Garden.

Detta spel fungerar på ett liknande sätt men lär dig hur man kodar CSS-nät. Det är en relativt ny funktion men det är fånga snabbt och Grid Garden är lätt det bästa sättet att lära sig.

Allt i Grid Garden följer a liknande undervisningsstil som Flexbox Froggy. Det skapades av samma utvecklare, Thomas Park, så du kan förvänta dig en liknande svårighetsgrad och användbarhet.

Som standard börjar du på nivå ett med a totalt 28 nivåer Från början till slut. Du kan alltid hoppa över nivåer om du tycker att det är för svårt, men jag tycker att det alltid är bra att arbeta genom dem alla som en uppdatering.

Om du inte har någon aning om hur nätverksrelaterade egenskaper fungerar, kommer du att hitta dig själv Googling många ord. CSS-rutnätet är en helt ny modul med sin egen syntax och funktioner.

Jag rekommenderar starkt att leka med Grid Garden när du får chansen. Det är praktiskt taget a CSS utvecklarens lekplats för att lära och studera alla de olika rutnets layoutegenskaper.

Jag kan inte säga att det här spelet kommer att göra dig till en expert på CSS-nät. Bara byggprojekt och övning mycket kan ge dig en expertnivå. Men, Grid Garden är ett roligt sätt att komma igång utan all den vanliga stress som går in i att lära sig något nytt.

Hela projektet är helt gratis och öppet på GitHub om du vill ladda ner det lokalt för att studera eller expandera. Du kan också dela dina tankar med skaparen på Twitter @ thomashpark.