Lär dig hur CSS Grid Properties arbetar med Griddy.io

Om du fortsätter med webbdesign tech bör du veta om CSS-nät. Dessa egenskaper är nya tillägg till CSS3-formatet och de blir snabbt utvecklareens bästa vän.

Vi har nyligen täckt ett roligt spel som hjälper dig att lära dig CSS-nätegenskaperna, men spelar inte alltid praktiska idéer. Det är där Griddy kan vara mer användbar.

Den här gratis webbappen låter dig anpassa grids i realtid och uppdatera live snippets på sidan. Du kan röra med ditt eget anpassade rutnät genom att definiera kolumner, takrännor och marginaler och omstrukturera sidan för att lära dig hur rutnätverk fungerar.

Griddy är faktiskt en gratis inlärningsverktyg gjord för frontendutvecklare vem vill förstå mer om CSS-nät.

Med den här webbappen kan du lägga till nya objekt i rutnätet, ta bort andra objekt och ändra storlek på dem för att passa vilken layout du vill ha.

Webappen har olika sektioner med olika inmatningsfält för redigering av rutnätegenskaper. Dessa låter dig formatera raderna / kolumnerna och de lär dig exakt vad du gör längs vägen.

Du kan definiera kolumnhål, justera rutnät och spela med motiveringsinställningar - alla genom dessa formulärfält. När du ändrar det kommer det automatiskt att uppdatera förhandsgranskningen och det lilla kodavsnittet nedan.

På så sätt kan du bara kopiera och klistra in CSS i ditt eget stilark om du vill röra med det vidare. Ganska cool!

Griddy är kanske inte lika kul som Grid Garden, men Griddy är ett praktiskt sätt att lära sig och visuellt förstå hur CSS-gridegenskaperna påverkar sidelementen.

Att leka med det bara gå till Griddy hemsida. Du kan också dela dina tankar eller frågor med skaparen på Twitter @drewisthe.