5 Resurse rapide pentru mastering CSS Layout Grid

În sfatul de astăzi rapid, vă voi arăta cinci resurse pentru a putea controla aspectul CSS Grid Layout. Hai să ne aruncăm!

 

O introducere rapidă în rețea

Grid Layout este, fără îndoială, una dintre cele mai importante evoluții pentru dezvoltatorii web de la nașterea CSS. Este un sistem de layout special destinat utilizării cu interfețe utilizator bazate pe rețea, ceea ce înseamnă că abordarea standard "float" (ceva de hack, să fim cinstiți) nu mai este necesară ca mijloc primar de a stabili o pagină web.

Primul proiect de lucru a fost publicat în 2011 și, credem sau nu, îi mulțumim Microsoft pentru o mare parte din dezvoltarea sa; trei dintre cei patru autori inițiali au făcut parte din echipa Microsoft. Această versiune inițială este învechită acum, fiind înlocuită de CSS Grid Layout Module Level 1.

5 Resurse Handy

Suportul pentru browser pentru Grid este deja foarte promițător, deci este timpul să vă familiarizați cu sintaxa. Iată câteva resurse excelente pentru a vă da drumul.

Mozilla: Introducere în aspectul rețelei CSS

Primul exemplu vine de la Mozilla. Introducerea în CSS Grid Layout acoperă elementele de bază, dar și concepte avansate, cum ar fi numirea liniilor. Este o resursă amănunțită, dar și frumos prezentată cu navigație clară, grafică atractivă și stilouri cu care poți să te joci și să te joci.

learncssgrid.com

O altă resursă amănunțită este learncssgrid.com de Jonathan Suh. Explică teoria din spatele sintaxei, prezentând, de asemenea, exemple de unele dintre cele mai comune modele de aspect de care ai putea avea nevoie.

CSS Tricks: Un ghid complet pentru rețea

În continuare, ne îndreptăm spre CSS Tricks pentru o resursă excelentă de către Chris House (în videoclipul pe care l-am crezut greșit Chris Coyier, mă scuză pentru asta). "Ghidul complet pentru rețea" este exact ceea ce v-ați aștepta; foarte complet. Acesta detaliază proprietățile pentru containerele de rețea și elementele de rețea din coloane separate. Lucru minunat, ca de obicei, din CSS Tricks.

Grilă prin exemplu

"Grid by Example" este dezvoltată și întreținută de Rachel Andrew (ea însăși membră a grupului de lucru pentru CSS Grid Layout) și a fost în jur de ceva timp. Pe lângă "ghidul de inițiere", care vă oferă toate informațiile esențiale despre spec., Vă oferă o mulțime de exemple și modele "apuca și merge" pentru cele mai comune planuri.

Cursuri Grid CSS pe Envato Tuts+

Dacă preferați să învățați prin video, vă recomand că vă recomandăm (evident!) Să examinați aceste cursuri de Craig Campbell. Primul (3 proiecte CSS Grid for Web Designers) te face să treci prin trei proiecte CSS Grid, cu exemple pe Codepen pentru a te abona și a practica.

3 proiecte CSS Grid pentru web designeri

Cea mai recentă cursă a lui Craig (Prezentarea CSS Grid Layout și Flexbox Together) explică modul în care puteți utiliza două dintre cele mai puternice module CSS (Grid și Flexbox) împreună.

Adugând CSS Grid Layout și Flexbox Together

Mergeți mai departe și învățați!

Această întâlnire rapidă vă oferă un început excelent pentru învățarea rețelei CSS. Toate resursele de aici includ exemple practice pe care le puteți folosi pentru a sapa și a întări teoria. Te las cu mai multe tutoriale, dar până la următoarea dată - de învățare fericită!