Ismerje meg, hogyan működik a CSS Grid tulajdonságai a Griddy.io használatával

Ha lépést tartana a web design tech-vel, akkor tudnia kell a CSS-rácsokról. Ezek a tulajdonságok új kiegészítések a CSS3 formátumhoz és gyorsan fejlődő legjobb barátjává válnak.

Nemrégiben egy szórakoztató játékot fedeztünk fel, hogy segítsünk megismerni a CSS hálózati tulajdonságait, de a játékok nem mindig gyakorlati ötleteket tanítanak. Itt lehet Griddy hasznosabb.

Ez az ingyenes webapp lehetővé teszi testreszabhatja a rácsokat valós időben és frissíti az élő részleteket az oldalon. Az oszlopokkal, csatornákkal és margókkal definiálhatja a saját egyéni rácsot, és átalakíthatja az oldalt, hogy megtudja, hogyan működik a rács tulajdonságai.

A Griddy valójában a ingyenes tanulási eszköz a frontend fejlesztők számára akik többet akarnak megérteni a CSS-rácsokról.

Ezzel a webappel új elemeket adhat hozzá a hálózathoz, távolíthat el más elemeket, és átméretezheti őket, hogy illeszkedjen a kívánt elrendezéshez.

A webapp különböző szekciókat tartalmaz különböző beviteli mezőkkel a rács tulajdonságainak szerkesztéséhez. Ezek lehetővé teszik a rácssorok / oszlopok formázását, és megtanítanak pontosan mit csinálsz az út mentén.

Megadhatja az oszlopréseket, igazíthatja a rácselemeket és játszhat az igazolási beállításokkal - mindezen űrlapmezőkön keresztül. Ha módosít, akkor automatikusan az előnézetet és az alatta lévő kis kódrészletet frissíti.

Így csak átmásolhatja és beillesztheti a CSS-t a saját stíluslapjába, ha tovább akarja rendezni. Elég jó!

Lehet, hogy a Griddy nem olyan szórakoztató, mint a Grid Garden, de Griddy egy gyakorlati módszer a tanulásra és vizuálisan megérteni hogyan befolyásolja a CSS-hálózat tulajdonságai az oldalelemeket.

A játékkal együtt csak látogasson el a Griddy kezdőlapjára. Szintén megoszthatja gondolatait vagy kérdéseit a Twitter @drewisthe alkotójával.