Aflați cum funcționează proprietățile Grid Grid cu Griddy.io

Dacă țineți pasul cu tehnologia de web design, atunci ar trebui să știți despre rețelele CSS. Aceste proprietăți sunt noi completări în format CSS3 și devin rapid un prieten mai bun al dezvoltatorului.

Am acoperit recent un joc distractiv care vă ajută să învățați proprietățile rețelei CSS, dar jocurile nu întotdeauna predau idei practice. Aici Griddy ar putea fi mai util.

Acest webapp gratuit vă permite personalizați grilele în timp real și actualizați fragmente live pe pagină. Puteți să vă mizeriți cu grila personalizată, definind coloane, jgheaburi și margini, și restructurând pagina pentru a afla cum funcționează proprietățile rețelei.

Griddy este de fapt a gratuit instrument de învățare făcut pentru dezvoltatorii frontend care vor să înțeleagă mai multe despre rețelele CSS.

Cu acest webapp puteți să adăugați elemente noi în rețea, să eliminați alte elemente și să le redimensionați pentru a se potrivi oricărui aspect pe care îl doriți.

Webapp are diferite secțiuni cu câmpuri de intrare diferite pentru editarea proprietăților rețelei. Acestea vă permit să reformați rândurile / coloanele rețelei și vă învață exact ceea ce faci pe parcurs.

Puteți defini goluri ale coloanelor, aliniați elementele grilei și puteți reda setările de justificare - toate aceste câmpuri de formular. Ori de câte ori faceți o schimbare, acesta va actualiza automat previzualizarea și fragmentul de cod mic de dedesubt.

În acest fel, puteți să copiați și să inserați CSS în propria foaie de stil, dacă doriți să o faceți mai departe. Destul de la moda!

Griddy nu poate fi la fel de distractiv ca Grid Garden, dar Griddy este o modalitate practică de a învăța și vizual înțelege modul în care proprietățile rețelei CSS afectează elementele de pagină.

Pentru a juca cu ea, vizitați pagina de pornire Griddy. Puteți, de asemenea, să vă împărtășiți gândurile sau întrebările dvs. cu creatorul de pe Twitter @drewisthe.