Lue, miten CSS-verkkoominaisuudet toimivat Griddy.io n kanssa

Jos pysyt web-suunnittelun tekniikassa, sinun pitäisi tietää CSS-verkkoista. Nämä ominaisuudet ovat uusia lisäyksiä CSS3-muotoon ja he tulevat nopeasti kehittäjän parhaaksi ystäväksi.

Viime aikoina käsittelimme hauskan pelin, jonka avulla voit oppia CSS-verkon ominaisuuksia, mutta pelit eivät aina opeta käytännön ideoita. Siellä Griddy saattaa olla hyödyllisempi.

Tämä ilmainen webapp antaa sinulle mahdollisuuden räätälöi verkkoja reaaliajassa ja päivittää live-katkelmia sivulla. Voit muokata omaa ruudukkoasi määrittämällä sarakkeet, viemärit ja marginaalit ja järjestämällä sivun uudelleen ja oppia, miten ruudukon ominaisuudet toimivat.

Griddy on itse asiassa a ilmainen oppimisväline, joka on tehty frontend-kehittäjille jotka haluavat ymmärtää enemmän CSS-verkkoja.

Tämän webappin avulla voit lisätä verkkoon uusia kohteita, poistaa muita kohteita ja muuttaa niiden kokoa sopivaksi haluamaasi asetteluun.

Verkkopalvelussa on eri osia, joissa on eri syöttökentät ruudukon ominaisuuksien muokkaamiseksi. Näiden avulla voit muotoilla ruudukon rivit / sarakkeet ja ne opettavat sinua mitä teet matkan varrella.

Voit määrittää sarakkeen aukkoja, kohdistaa ruudukon kohteita ja pelata perusteluasetuksilla - kaikki näiden lomakekenttien kautta. Aina kun teet muutoksen, se päivittää automaattisesti esikatselun ja pienen koodinpätkän alla.

Näin voit kopioida ja liittää CSS: n omaan tyylisivuosi, jos haluat sekoittaa sitä edelleen. Aika siistiä!

Griddy ei ehkä ole yhtä hauskaa kuin Grid Garden, mutta Griddy on käytännöllinen tapa oppia ja visuaalisesti ymmärtää miten CSS-verkon ominaisuudet vaikuttavat sivuelementteihin.

Jos haluat pelata sen kanssa, käy vain Griddy-kotisivulla. Voit myös jakaa ajatuksesi tai kysymyksesi Twitterin @drewisthe-tekijän kanssa.