Lær hvordan CSS-gridegenskaper fungerer 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 webapp lar deg tilpasse grids i sanntid og oppdaterer live utdrag på siden. Du kan rote med ditt eget tilpassede rutenett ved å definere kolonner, takrenner og marginer, og omstrukturere siden for å lære hvordan rutenettegenskaper fungerer.

Griddy er faktisk et gratis læringsverktøy laget for frontend utviklere som vil forstå mer om CSS grids.

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 rutenettet / kolonnene, og de lærer deg nøyaktig hva du gjør underveis.

Du kan definere kolonnehull, justere gridobjekter og spille med begrunnelsesinnstillinger - alle gjennom disse skjemafeltene. Når du gjør en endring, vil den 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.