Lær hvordan CSS Grid Properties jobber med Griddy.io

Hvis du fortsetter med webdesign tech, bør du vite om CSS-nett. Disse egenskapene er nye tillegg til CSS3-formatet og de blir fort utviklerens beste venn.

Vi har nylig dekket et morsomt spill for å hjelpe deg med å lære CSS-gridegenskapene, men spillene lærer ikke alltid praktiske ideer. Det er der Griddy kan være mer nyttig.

Denne gratis webappen lar deg tilpasse rutenettet i sanntid og oppdater oppdateringsutdrag på siden. Du kan rote med ditt eget tilpassede rutenett ved å definere kolonner, takrenner og marginer, og omstrukturere siden for å lære hvordan rutenettverk fungerer.

Griddy er faktisk en gratis læringsverktøy laget for frontend-utviklere hvem vil forstå mer om CSS-nett.

Med denne webappen kan du legge til nye elementer i rutenettet, fjerne andre elementer, og endre størrelsen på dem slik at de passer til hvilken som helst layout du vil ha.

Webappen har forskjellige seksjoner med forskjellige inputfelter for redigering av gridegenskaper. Disse lar deg reformere rutenettene / kolonnene og de lærer deg akkurat hva du gjør langs veien.

Du kan definere kolonnehull, justere gridelementer og spille med begrunnelsesinnstillinger - alle gjennom disse skjemafeltene. Når du gjør en endring, vil det automatisk oppdatere forhåndsvisningen og den små kodestykket under.

På denne måten kan du bare kopiere og lime inn CSS i ditt eget stilark hvis du vil rote med det videre. Ganske kult!

Griddy er kanskje ikke så morsomt som Grid Garden, men Griddy er en praktisk måte å lære og visuelt forstå hvordan CSS-gridegenskapene påvirker sideelementer.

Å leke med det bare gå til Griddy hjemmeside. Du kan også dele dine tanker eller spørsmål med skaperen på Twitter @drewisthe.