Cele mai bune practici cu aspectul grilă CSS

O întrebare din ce în ce mai frecventă – acum că oamenii folosesc CSS Grid Layout în producție – pare să fie „Care sunt cele mai bune practici?” Răspunsul scurt la această întrebare este să utilizați metoda de layout așa cum este definită în specificație. Părțile specifice ale specificațiilor pe care alegeți să le utilizați și, într-adevăr, modul în care combinați Grid cu alte metode de aspect, cum ar fi Flexbox, depinde de ceea ce funcționează pentru modelele pe care încercați să le construiți și de modul în care dvs. și echipa dvs. doriți să lucrați.

Privind mai profund, cred că poate această solicitare pentru „cele mai bune practici” indică probabil o lipsă de încredere în utilizarea unei metode de layout care este foarte diferită de ceea ce a apărut înainte. Poate că o îngrijorare că folosim Grid pentru lucruri pentru care nu a fost conceput sau că nu folosim Grid atunci când ar trebui. Poate că se reduce la grijile legate de suportarea browserelor mai vechi sau de modul în care Grid se potrivește fluxului nostru de lucru de dezvoltare.

În acest articol, voi încerca să acopăr unele dintre lucrurile care ar putea fi descrise ca fiind cele mai bune practici și unele lucruri pentru care probabil nu trebuie să vă faceți griji.

Studiul

Pentru a ajuta la informarea acestui articol, am vrut să aflu cum foloseau alți oameni Grid Layout în producție, care au fost provocările cu care s-au confruntat, ce le-a plăcut cu adevărat la el? Au fost folosite întrebări, probleme sau metode comune? Pentru a afla, am alcătuit un sondaj rapid, punând întrebări despre modul în care oamenii foloseau Grid Layout și, în special, ce le-a plăcut cel mai mult și ce li s-a părut provocator.

În articolul care urmează, voi face referire și voi cita direct unele dintre aceste răspunsuri. De asemenea, voi face linkuri către o mulțime de alte resurse, unde puteți afla mai multe despre tehnicile descrise. După cum s-a dovedit, în răspunsurile la sondaj au existat mult mai mult de un articol care valorează lucruri interesante. Voi aborda unele dintre celelalte lucruri care au apărut într-o postare viitoare.

Accesibilitate

Dacă există vreo parte a specificației Grid de care trebuie să aveți grijă atunci când utilizați, atunci este atunci când utilizați ceva care ar putea provoca reordonarea conținutului:

„Autorii trebuie să folosească ordinea și proprietățile de plasare în grilă numai pentru reordonarea vizuală, nu logică, a conținutului. Foile de stil care folosesc aceste caracteristici pentru a efectua reordonarea logică sunt neconforme.”

— Specificația rețelei: recomandă și accesibilitate

Acest lucru nu este unic pentru Grid, cu toate acestea, capacitatea de a rearanja conținut atât de ușor în două dimensiuni îl face o problemă mai mare pentru Grid. Cu toate acestea, dacă utilizați orice metodă care permite reordonarea conținutului - fie că este Grid, Flexbox sau chiar poziționare absolută - trebuie să aveți grijă să nu deconectați experiența vizuală de modul în care este structurat conținutul în document. Cititoarele de ecran (și persoanele care navighează prin document folosind doar o tastatură) vor urma ordinea elementelor din sursă.

Locurile în care trebuie să fii deosebit de atent sunt atunci când folosești flex-direction pentru a inversa ordinea în Flexbox; proprietatea order în Flexbox sau Grid; orice plasare a elementelor Grid folosind orice metodă, dacă mută elemente din ordinea logică din document; și utilizarea modului de ambalare densă a grid-auto-flow .

Pentru mai multe informații despre această problemă, consultați următoarele resurse:

• Aspect grilă și accesibilitate - MDN
• Flexbox și tastatura de navigare se deconectează

Ce metode de aranjare a grilei ar trebui să folosesc?

„Cu atâtea opțiuni în Grid, a fost o provocare să rămânem la un mod consistent de a-l scrie (de exemplu, denumirea liniilor de grilă sau nu, definirea zonelor de șablon de grilă, alternative, interogări media), astfel încât să fie menținută de întreg. echipă."

— Michelle Barker

Când aruncați o privire prima dată la Grid, poate părea copleșitor cu atât de multe moduri diferite de a crea un aspect. În cele din urmă, totuși, totul se reduce la poziționarea lucrurilor de la o linie a grilei la alta. Aveți opțiuni în funcție de aspectul pe care încercați să îl realizați, precum și de ceea ce funcționează bine pentru echipa dvs. și site-ul pe care îl construiți.

Nu există o cale corectă sau greșită. Mai jos, voi reveni asupra unora dintre temele comune ale confuziei. De asemenea, am acoperit deja multe alte zone potențiale de confuzie într-un articol anterior „Grid Gotchas and Stumbling Blocks”.

Ar trebui să folosesc o grilă implicită sau explicită?

Grila pe care o definiți cu grid-template-columns și grid-template-rows este cunoscută sub numele de Grid explicit. Grila explicită permite denumirea liniilor de pe Grilă și, de asemenea, vă oferă posibilitatea de a viza linia finală a grilei cu -1 . Veți alege o Grilă explicită pentru a face oricare dintre aceste lucruri și, în general, când aveți un aspect proiectat și știți exact unde ar trebui să meargă liniile grilei și dimensiunea pistelor.

Folosesc Grila implicită cel mai adesea pentru piese de rând. Vreau să definesc coloanele, dar apoi rândurile vor fi dimensionate automat și vor crește pentru a conține conținutul. Puteți controla Grila implicită într-o oarecare măsură cu grid-auto-columns și grid-auto-rows , cu toate acestea, aveți mai puțin control decât dacă definiți totul.

Trebuie să decideți dacă știți exact cât conținut aveți și, prin urmare, numărul de rânduri și coloane - caz în care puteți crea o Grilă explicită. Dacă nu știți cât de mult conținut aveți, dar doriți pur și simplu rânduri sau coloane create pentru a păstra orice există, veți folosi Grila implicită.

Cu toate acestea, este posibil să combinați cele două. În CSS-ul de mai jos, am definit trei coloane în Grila explicită și trei rânduri, astfel încât primele trei rânduri de conținut vor fi următoarele:

• O pistă de cel puțin 200 de pixeli în înălțime, dar care se extinde pentru a duce conținutul mai înalt,
• O pistă fixată la 400 px înălțime,
• O pistă de cel puțin 300 px în înălțime (dar se extinde).

Orice conținut suplimentar va intra într-un rând creat în Grila implicită, iar eu folosesc proprietatea grid-auto-rows pentru a face acele melodii înălțime de cel puțin 300 px, extinzându-se la auto .

 .grid { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: minmax(200px auto) 400px minmax(300px, auto); grid-auto-rows: minmax(300px, auto); grid-gap: 20px; }

O grilă flexibilă cu un număr flexibil de coloane

Folosind notația repetată, completarea automată și minmax, puteți crea un model de câte piese se pot încadra într-un container, eliminând astfel nevoia de interogări media într-o oarecare măsură. Această tehnică poate fi găsită în acest tutorial video și, de asemenea, demonstrată împreună cu idei similare în articolul meu recent „Utilizarea interogărilor media pentru designul responsiv în 2018”.

Alegeți această tehnică atunci când sunteți mulțumit ca conținutul să scadă sub conținutul anterior atunci când este mai puțin spațiu și vă bucurați să permiteți multă flexibilitate în dimensionare. Ați solicitat în mod special ca coloanele dvs. să fie afișate cu o dimensiune minimă și să se completeze automat .

Au existat câteva comentarii în sondaj care m-au făcut să mă întreb dacă oamenii alegeau această metodă atunci când își doreau cu adevărat o grilă cu un număr fix de coloane. Dacă ajungeți cu un număr imprevizibil de coloane la anumite puncte de întrerupere, ar putea fi mai bine să setați numărul de coloane - și să-l redefiniți cu interogări media după cum este necesar - decât să utilizați auto-fill auto-fit .

Ce metodă de dimensionare a șenilei ar trebui să folosesc?

Am descris în detaliu dimensiunea piesei în articolul meu „Cât de mare este cutia? Înțelegerea dimensiunii în aspectul grilei”, cu toate acestea, primesc adesea întrebări cu privire la metoda de dimensionare a pistelor să folosesc. În special, sunt întrebat despre diferența dintre dimensiunea procentuală și unitatea fr .

Dacă pur și simplu utilizați unitatea fr așa cum este specificat, atunci aceasta diferă de utilizarea unui procent deoarece distribuie spațiul disponibil. Dacă plasați un articol mai mare într-o pistă, atunci modul în care va funcționa fr until este acela de a permite acelei piese să ocupe mai mult spațiu și să distribuie ceea ce a mai rămas.

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; } 

Pentru a determina ca unitatea fr să distribuie tot spațiul din containerul grilă, trebuie să îi oferiți o dimensiune minimă de 0 folosind minmax() .

 .grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); grid-gap: 20px; }

Deci, puteți alege să utilizați fr în oricare dintre aceste scenarii: cele în care doriți distribuția spațiului pe bază de auto (comportamentul implicit) și cele în care doriți o distribuție egală. De obicei, aș folosi unitatea fr , deoarece apoi stabilește dimensionarea pentru dvs. și permite utilizarea pistelor sau golurilor cu lățime fixă. Singura dată când folosesc un procent este atunci când adaug componente de grilă la un aspect existent care utilizează și alte metode de aspect. Dacă vreau ca componentele grilei mele să se alinieze cu un aspect bazat pe float sau flex care utilizează procente, folosirea lor în aspectul grilă înseamnă că totul folosește aceeași metodă de dimensionare.

Plasați automat elementele sau setați-le poziția?

Veți descoperi adesea că trebuie să plasați doar unul sau două elemente în aspectul dvs., iar restul se încadrează în funcție de ordinea conținutului. De fapt, acesta este un test foarte bun că nu ați deconectat sursa și afișajul vizual. Dacă lucrurile se poziționează destul de mult pe baza plasării automate, atunci probabil că sunt într-o ordine bună.

Cu toate acestea, odată ce m-am hotărât unde merge totul, am tendința de a atribui o poziție tuturor. Aceasta înseamnă că nu ajung să se întâmple lucruri ciudate dacă cineva adaugă ceva la document și grila îl plasează automat undeva neașteptat, aruncând astfel aspectul. Dacă totul este plasat, Grid va pune acel element în următoarea celulă disponibilă de grilă. S-ar putea să nu fie exact acolo unde doriți, dar să vă așezați la sfârșitul aspectului dvs. este probabil mai bine decât să apăs în mijloc și să împingeți alte lucruri.

Ce metodă de poziționare să utilizați?

Când lucrați cu Grid Layout, în cele din urmă totul se reduce la plasarea elementelor de la o linie la alta. Orice altceva este în esență un ajutor pentru asta.

Decideți împreună cu echipa dacă doriți să denumiți linii, să utilizați zonele șablon grilă sau dacă veți folosi o combinație de diferite tipuri de aspect. Găsesc că îmi place să folosesc zonele șabloane grilă în special pentru componentele mici. Cu toate acestea, nu există niciun drept sau rău. Descoperă ce este mai bine pentru tine.

Grilă în combinație cu alte mecanisme de aranjare

Amintiți-vă că Grid Layout nu este singura metodă adevărată de aspect pentru a le guverna pe toate, este concepută pentru un anumit tip de aspect - și anume aspect bidimensional. Alte metode de aranjare există încă și ar trebui să luați în considerare fiecare model și ceea ce i se potrivește cel mai bine.

Cred că acest lucru este de fapt destul de greu pentru cei dintre noi obișnuiți să pirateze cu metode de aspect pentru a-i face să facă ceva pentru care nu au fost cu adevărat proiectați. Este un moment foarte bun să faci un pas înapoi, să te uiți la metodele de aspect pentru sarcinile pentru care au fost concepute și să nu uiți să le folosești pentru acele sarcini.

În special, indiferent de cât de des scriu despre Grid versus Flexbox, voi fi întrebat pe care oamenii ar trebui să folosească. Există multe modele în care oricare dintre metodele de aspect are sens perfect și într-adevăr depinde de tine. Nimeni nu te va striga pentru că selectezi Flexbox peste Grid sau Grid peste Flexbox.

În munca mea, tind să folosesc Flexbox pentru componente în care vreau ca dimensiunea naturală a articolelor să controleze puternic aspectul lor, împingând în esență celelalte articole. Folosesc adesea Flexbox pentru că vreau aliniere, având în vedere că proprietățile Box Alignment sunt disponibile numai pentru utilizare în Flexbox și Grid. Aș putea avea un container Flex cu un articol copil, pentru a putea alinia acel copil.

Un semn că, probabil, Flexbox nu este metoda de aspect pe care ar trebui să o aleg este atunci când încep să adaug lățimi procentuale la elementele flex și să setez flex-grow la 0. Motivul pentru a adăuga lățimi procentuale la articolele flex este adesea pentru că încerc să linie le în două dimensiuni (alinierea lucrurilor în două dimensiuni este exact pentru care este Grid). Cu toate acestea, încercați pe ambele și vedeți care pare să se potrivească cel mai bine conținutului sau modelului de design. Este puțin probabil să provocați probleme făcând acest lucru.

Nesting Grid și Flex Elemente

Acest lucru apare, de asemenea, foarte mult și nu există absolut nicio problemă cu a face un element Grid și un Container Grid, astfel imbricarea unei grile în alta. Puteți face același lucru cu Flexbox, creând un articol Flex și un container Flex. De asemenea, puteți face un articol Grid și un container Flex sau un articol Flex un Container Grid - niciunul dintre aceste lucruri nu reprezintă o problemă!

Ceea ce nu putem face în prezent este să cuibăm o grilă în alta și să facem grila imbricată să folosească traseele grilei definite pe părintele general. Acest lucru ar fi foarte util și este ceea ce speră să rezolve propunerile de subgrilă de la Nivelul 2 al Specificației Grid. O grilă imbricată devine în prezent o nouă grilă, așa că ar trebui să fiți atenți la dimensionare pentru a vă asigura că se aliniază cu orice piese părinte.

Puteți avea mai multe grile pe o singură pagină

Un comentariu a apărut de câteva ori în sondaj care m-a surprins, se pare că există o idee că o grilă ar trebui să fie limitată la aspectul principal și că multe grile de pe o singură pagină poate nu erau un lucru bun. Puteți avea câte grile doriți! Folosiți grila pentru lucruri mari și mici, dacă are sens aranjat ca o grilă, atunci utilizați Grid.

Alternative și suport pentru browsere mai vechi

„Gridul utilizat împreună cu @supports ne-a permis să controlăm mai bine numărul de variații de aspect pe care ne putem aștepta să le vedem. De asemenea, a funcționat foarte bine cu abordarea noastră de îmbunătățire progresivă, ceea ce înseamnă că îi putem recompensa pe cei cu browsere moderne, fără a împiedica accesul la conținut pentru cei care nu folosesc cea mai recentă tehnologie.”

— Joe Lambert lucrează pe rareloop.com

În sondaj, mulți oameni au menționat browsere mai vechi, totuși, a existat o împărțire relativ egală între cei care au considerat că suportarea browserelor mai vechi este dificilă și cei care au simțit că este ușor datorită Interogărilor de caracteristici și a faptului că Grid suprascrie alte metode de aspect. Am scris pe larg despre mecanismele creării acestor alternative în „Utilizarea CSS Grid: Suportul browserelor fără grilă”.

În general, browserele moderne sunt mult mai interoperabile decât omologii lor anterioare. Tindem să vedem mult mai puține „defecțiuni ale browserului” și dacă utilizați corect HTML și CSS, atunci veți constata că ceea ce vedeți într-un browser este același cu altul.

Desigur, avem situații în care un browser nu a livrat încă suport pentru o anumită specificație sau pentru unele părți ale unei specificații. Cu Grid, am fost foarte norocoși că browserele au livrat Grid Layout într-un mod foarte complet și interoperabil într-un timp scurt unul de celălalt. Prin urmare, considerațiile noastre pentru testare tind să fie nevoia de a testa browserele cu Grid și fără Grid. Este posibil să fi ales, de asemenea, să utilizați versiunea cu prefix -ms în IE10 și IE11, care ar necesita apoi testarea ca al treilea tip de browser.

Browserele care acceptă aspectul grilă modern (nu versiunea IE) acceptă, de asemenea, interogări de caracteristici. Aceasta înseamnă că puteți testa suportul Grid înainte de a-l folosi.

Testarea browserelor care nu acceptă grila

Când utilizați alternative pentru browsere fără suport pentru Grid Layout (sau folosiți versiunea prefixată -ms pentru IE10 și 11), veți dori să testați modul în care acele browsere redă Grid Layout. Pentru a face acest lucru, aveți nevoie de o modalitate de a vă vizualiza site-ul într-un exemplu de browser.

Nu aș accepta abordarea de a vă întrerupe Interogarea caracteristică verificând dacă există suport pentru ceva fără sens sau scriind greșit grid de valori. Această abordare va funcționa numai dacă foaia de stil este incredibil de simplă și ați pus absolut totul de-a face cu aspectul grilă în interiorul Interogărilor de caracteristici. Acesta este un mod de lucru foarte fragil și consumator de timp, mai ales dacă utilizați pe scară largă Grid. În plus, un browser mai vechi nu va avea doar suport pentru Grid Layout, ci și alte proprietăți CSS neacceptate. Dacă sunteți în căutarea „cele mai bune practici”, atunci vă pregătiți astfel încât să fiți într-o poziție bună pentru a vă testa munca este sus!

Există câteva moduri simple de a vă configura o metodă adecvată de testare a alternativelor. Cea mai ușoară metodă – dacă aveți o conexiune la internet relativ rapidă și nu vă deranjează să plătiți o taxă de abonament – ​​este să utilizați un serviciu precum BrowserStack. Acesta este un serviciu care permite vizualizarea site-urilor web (chiar și a celor aflate în dezvoltare pe computerul dvs.) pe o mulțime de browsere reale. BrowserStack oferă conturi gratuite pentru proiecte open-source.

Pentru a testa la nivel local, sugestia mea ar fi să utilizați o mașină virtuală cu browser-ul țintă instalat. Microsoft oferă descărcări gratuite de mașini virtuale cu versiuni de IE înapoi la IE8 și, de asemenea, Edge. De asemenea, puteți instala pe VM o versiune mai veche a unui browser fără suport Grid. De exemplu, obținând o copie a Firefox 51 sau mai jos. După ce instalați vechiul dvs. Firefox, asigurați-vă că dezactivați actualizările automate așa cum este explicat aici, deoarece altfel se va actualiza în liniște!

Puteți testa apoi site-ul dvs. în IE11 și în Firefox care nu acceptă pe o singură VM (o soluție mult mai puțin fragilă decât valorile greșite de ortografie). Configurarea vă poate dura aproximativ o oră, dar atunci vă veți afla într-un loc foarte bun pentru a vă testa alternativele.

Dezînvățarea vechilor obiceiuri

„A fost prima dată când am folosit Grid Layout, așa că erau multe concepte de învățat și proprietățile înțelese. Din punct de vedere conceptual, mi s-a părut cel mai dificil lucru să dezvăd toate lucrurile pe care le-am făcut ani de zile, cum ar fi curățarea flotoarelor și împachetarea totul în containere div.”

— Hidde lucrând pe hiddedevries.nl/en

Mulți dintre cei care au răspuns la sondaj au menționat necesitatea de a dezvăța vechile obiceiuri și modul în care învățarea Layout ar fi mai ușoară pentru oamenii complet nou la CSS. tind să fiu de acord. Când predau oamenii în persoană, începătorii complet au puține probleme cu utilizarea Grid, în timp ce dezvoltatorii experimentați încearcă din greu să readucă grila la o metodă de aspect unidimensional. Am văzut încercări de „sisteme de grilă” folosind CSS Grid care adaugă înapoi în wrapper-urile de rând necesare pentru o grilă bazată pe float sau flexibil.

Nu vă fie teamă să încercați noi tehnici . Dacă aveți capacitatea de a testa în câteva browsere și rămâneți conștient de potențialele probleme de accesibilitate, chiar nu puteți greși prea departe. Și, dacă găsești o modalitate grozavă de a crea un anumit model, anunță-i pe toți ceilalți despre el. Cu toții suntem începători în utilizarea Grid în producție, așa că cu siguranță există multe de descoperit și de împărtășit.

„Grid Layout este cea mai interesantă dezvoltare CSS de la interogările media. A fost atât de bine gândit pentru nevoile dezvoltatorilor din lumea reală și este o bucurie absolută de utilizat în producție - atât pentru designeri, cât și pentru dezvoltatori.”

— Trys Mudford lucrează pe trysmudford.com

Pentru a încheia, iată o listă foarte scurtă cu cele mai bune practici actuale! Dacă ai descoperit lucruri care funcționează sau nu bine în situația ta, adaugă-le în comentarii.

1. Fiți foarte conștienți de posibilitatea reordonării conținutului. Verificați dacă nu ați deconectat afișajul vizual de la comanda documentelor.
2. Testați folosind browsere țintă reale cu o mașină virtuală locală sau la distanță.
3. Nu uitați că metodele mai vechi de layout sunt încă valabile și utile. Încercați diferite moduri de a obține tipare. Nu fi obosit să folosești Grid.
4. Știți că, în calitate de dezvoltator front-end cu experiență, este posibil să aveți un întreg set de preconcepții despre modul în care funcționează aspectul. Încercați să priviți din nou aceste metode noi, mai degrabă decât să le forțați înapoi în modele vechi.
5. Continuați să încercați lucrurile. Cu toții suntem noi în asta. Testează-ți munca și împărtășește ceea ce descoperi.