Lugege, kuidas CSS Grid Omadused Griddy.io-ga töötavad

Kui olete veebidisaini tehnikaga kursis, siis peaksite teadma CSS-võrke. Need omadused on uued täiendused CSS3 formaadis ja nad saavad kiiresti arendaja parimaks sõbraks.

Hiljuti käsitlesime lõbusat mängu, et aidata teil õppida CSS-võrguomadusi, kuid mängud ei õpeta alati praktilisi ideid. Seal võib Griddy olla kasulikum.

See tasuta webapp võimaldab teil kohandage võrke reaalajas ja värskendatakse elusaid fragmente lehel. Saate segada oma kohandatud võrku, määratledes veerud, vihmaveetorud ja varud ning restruktureerige leht, et teada saada, kuidas võrguomadused toimivad.

Griddy on tegelikult a tasuta õppevahend, mis on loodud frontendi arendajatele kes soovivad CSS-võrkude kohta rohkem aru saada.

Selle veebikeskkonna abil saate võrku lisada uusi objekte, eemaldada teisi üksusi ja muuta nende suurust, et see sobiks iga soovitud paigutusega.

Veebikaardil on erinevad sektsioonid erinevate sisendväljadega võrguomaduste muutmiseks. Need võimaldavad vormindada ruudustiku read / veerud ja nad õpetavad teid täpselt, mida sa teed tee peal.

Saate määratleda veerude lünki, joondada ruudustiku elemendid ja mängida põhjenduste seadetega - kõik need vormiväljad. Kui muudate muudatusi, värskendab see automaatselt eelvaadet ja väikest koodilõiget.

Nii saate lihtsalt kopeerida ja kleepida CSS oma stiililehele, kui tahate sellega veelgi segada. Päris lahe!

Griddy ei pruugi olla nii lõbus kui Grid Garden, kuid Griddy on praktiline viis õppida ja visuaalselt mõista kuidas CSS-võrgu omadused mõjutavad lehekülje elemente.

Sellega mängimiseks külastage lihtsalt Griddy kodulehte. Samuti saate oma mõtteid ja küsimusi jagada Twitteri @drewisthe loojaga.