Lær, hvordan CSS Grid Properties arbejder med Griddy.io

Hvis du holder op med webdesign tech, bør du vide om CSS-net. Disse egenskaber er nye tilføjelser til CSS3 formatet og de bliver hurtigt udviklerens bedste ven.

Vi har for nylig dækket et sjovt spil for at hjælpe dig med at lære CSS gridegenskaberne, men spil lærer ikke altid praktiske ideer. Det er her, Griddy kan være mere nyttigt.

Denne gratis webapp giver dig mulighed for tilpasse net i realtid og opdater live uddrag på siden. Du kan rote med dit eget brugergitter ved at definere kolonner, riller og margener og omstrukturere siden for at lære, hvordan gitteregenskaber virker.

Griddy er faktisk en gratis læringsværktøj lavet til frontend-udviklere hvem vil forstå mere om CSS-net.

Med denne webapp kan du tilføje nye genstande i nettet, fjerne andre elementer og ændre størrelsen på dem, så de passer til ethvert layout, du ønsker.

Webapp'en har forskellige sektioner med forskellige inputfelter til redigering af gitteregenskaber. Disse lader dig omformatere gitterrækkerne / kolonnerne, og de lærer dig præcis hvad du laver langs vejen.

Du kan definere kolonnehuller, justere gitterelementer og spille med begrundelsesindstillinger - alle gennem disse formularfelter. Når du foretager en ændring, opdateres den automatisk og forhåndsvisning af den lille kodestykke nedenunder.

På denne måde kan du bare kopiere og indsætte CSS'en i dit eget stylesheet, hvis du vil røre med det yderligere. Pretty cool!

Griddy er måske ikke så sjovt som Grid Garden, men Griddy er en praktisk måde at lære og visuelt forstå hvordan CSS-gridegenskaberne påvirker sideelementer.

For at lege med det skal du bare besøge Griddy hjemmeside. Du kan også dele dine tanker eller spørgsmål med skaberen på Twitter @drewisthe.