Grila CSS Nivelul 2: Aici vine Subgrid

Suntem acum peste un an de la aterizarea CSS Grid Layout în majoritatea browserelor noastre, iar Grupul de lucru CSS lucrează deja la nivelul 2 al specificației. În acest articol, voi explica ce face parte în prezent din proiectul de lucru și al editorului respectivei specificații. Rețineți că totul aici poate fi schimbat și niciunul nu funcționează în prezent în browsere. Luați asta ca o privire în proces, sunt sigur că voi scrie mai multe piese practice pe măsură ce începem să vedem implementările iau contur.

Niveluri de specificații CSS

Caracteristicile CSS Grid pe care le putem folosi în prezent în browsere sunt cele de la nivelul 1 al specificației CSS Grid. Diferitele părți ale CSS sunt împărțite în module; această modularizare s-a întâmplat când CSS a trecut de la CSS 2.1, motiv pentru care uneori auziți oameni vorbind despre CSS3. În realitate, nu există CSS3. În schimb, a existat un set de module care includeau toate lucrurile care făceau deja parte din specificația CSS2.1. Orice CSS care a existat în CSS2.1 a devenit parte a unui modul de Nivel 3, prin urmare, avem Selectori CSS Nivel 3, deoarece selectoarele existau în CSS2.1.

Noile funcții CSS care nu făceau parte din CSS2.1, cum ar fi CSS Grid Layout, încep la nivelul 1. Specificația CSS Grid Level 1 este, în esență, prima versiune a Grid. Odată ce un nivel de specificație ajunge la starea de recomandare candidat, funcțiile noi majore nu sunt adăugate. Aceasta înseamnă că browserele și alți agenți de utilizator pot implementa specificația și poate deveni o recomandare W3C. Dacă urmează să fie proiectate noi caracteristici, acestea se vor întâmpla într-un nou Nivel al specificației. Suntem în acest moment cu CSS Grid Layout. Specificația de nivel 1 este la CR și a fost creată o specificație de nivel 2 pentru a putea lucra la noi funcții. Vă sugerez să vă uitați la Schița editorului dacă doriți să urmați discuțiile despre specificații, deoarece aceasta va conține toate cele mai recente editări.

Ce va conține nivelul 2 al grilei CSS?

În cele din urmă, specificația de nivel 2 va conține tot ceea ce este deja în Nivelul 1 plus câteva funcții noi. Dacă aruncați o privire asupra specificațiilor în momentul scrierii, există o notă care explică faptul că întregul nivel 1 ar trebui copiat odată ce nivelul 2 atinge CR.

Ne putem aștepta apoi să găsim câteva funcții noi, iar Nivelul 2 al Specificației Grid este totul despre elaborarea funcției subgrid a CSS Grid. Această caracteristică a fost eliminată din specificația de nivel 1 pentru a oferi timp pentru a înțelege în mod corespunzător cazurile de utilizare pentru subgrilă și pentru a oferi mai mult timp pentru a lucra la ea fără a opri restul nivelului 1. În restul acestui articol, voi aruncați o privire la caracteristica subgrilă, așa cum este detaliată în prezent în Schița editorului. Ne aflăm într-o etapă foarte incipientă cu caracteristica, totuși, acesta este momentul perfect pentru a urmări și pentru a contribui efectiv la modelarea modului în care este dezvoltată specificația. Scopul meu când scriu acest articol este să explic unele dintre lucrurile discutate, pentru a putea înțelege și a aduce contribuția dvs. la discuții.

Ce este o subgrilă?

Când utilizați CSS Grid Layout, puteți deja cuibărit grile. În exemplul de mai jos, am o grilă părinte cu șase coloane și trei rânduri. Am poziționat un articol pe această grilă de la linia coloană 2 la linia 6 și de la rândul linia 1 la 3. Apoi am făcut din acel articol un container grilă și am definit urmele coloanei.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: 2fr 1fr 2fr 1fr; }

Urmele grilei noastre imbricate nu au nicio relație cu pistele de pe părintele. Aceasta înseamnă că, dacă dorim să putem alinia urmele grilei noastre imbricate cu liniile de pe grila exterioară, trebuie să facem treaba și să folosim metode de calculare a dimensiunilor pistelor care să asigure că toate pistele rămân egale. În exemplul de mai sus, piesele vor părea aliniate, până când un element cu o dimensiune mai mare este adăugat într-o celulă a grilei (făcându-l să utilizeze mai mult spațiu).

Pentru coloane, este adesea posibil să ocoliți scenariul de mai sus, în esență prin restrângerea flexibilității grilei. Puteți face coloanele de unități fr minmax(0,1fr) pentru ca acestea să ignore dimensiunea articolului atunci când faceți distribuția spațiului sau puteți reveni la utilizarea procentelor. Cu toate acestea, acest lucru elimină unele dintre beneficiile utilizării grilei și, atunci când vine vorba de alinierea rândurilor într-o grilă imbricată, aceste metode nu vor funcționa.

Să presupunem că vrem un aspect de card în care cardurile individuale au un antet, un corp și un subsol. De asemenea, dorim ca antetul și subsolul să se alinieze peste cărți.

 .cards { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; } .card { display: grid; grid-template-rows: auto 1fr auto; }

Acest lucru funcționează atâta timp cât conținutul are aceeași înălțime în fiecare antet și subsol. Dacă avem conținut suplimentar, atunci iluzia este ruptă și anteturile și subsolurile nu se mai aliniază pe rând.

Crearea unei subgrile

Acum putem arunca o privire asupra modului în care funcția subgrilă este specificată în prezent și cum ar putea rezolva problemele pe care le-am arătat mai sus.

Notă : La momentul scrierii, niciunul dintre codurile de mai jos nu funcționează în browsere. Scopul aici este de a explica sintaxa și conceptele. Specificația finală este, de asemenea, probabil să se schimbe de la aceste detalii. Pentru referință, am scris acest articol pe baza proiectului Editorului disponibil pe 23 iunie 2018.

Pentru a crea o subgrilă, vom avea o nouă valoare pentru grid-template-rows și grid-template-columns . Aceste proprietăți sunt utilizate în mod normal cu o listă de melodii, care definește numărul și dimensiunea melodiilor de rând și coloane. Când creați o subgrilă, totuși, nu doriți să specificați aceste piste. În schimb, utilizați valoarea subgrid pentru a spune grilei că această grilă imbricată ar trebui să folosească numărul de piste și dimensiunea pistelor pe care le întinde zona grilei pe care o acoperă.

În codul de mai jos, am o grilă părinte cu piese cu 6 coloane și piese cu 3 rânduri. Grila imbricată este un element de grilă pe acea grilă părinte și se întinde de la linia coloanei 2 la linia coloanei 6 și de la linia rândului 1 la linia rândului 4. Acesta este la fel ca exemplul nostru inițial, cu toate acestea, acum îl putem arunca o privire folosind subgrilă. Grila imbricată are o valoare subgrid atât pentru grid-template-columns cât și grid-template-rows . Aceasta înseamnă că grila imbricată are acum piste cu 4 coloane și piste cu 2 rânduri, folosind aceeași dimensiune ca și pistele definite pe părintele.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }

Aceasta ar însemna că orice modificare a dimensiunii piesei de pe părintele ar fi urmată de grila imbricată. Un cuvânt mai lung care lărește una dintre pistele din grila părinte ar avea ca rezultat și acea pistă din grila imbricată să devină mai lată, astfel încât lucrurile ar continua să se alinieze. Acest lucru ar funcționa și în alt mod: pistele grilei părinte ar putea deveni mai largi pe baza conținutului din subgrilă.

Subgrile unidimensionale

Puteți avea o subgrilă într-o dimensiune și puteți specifica dimensiunea pistei într-o altă dimensiune. În acest exemplu următor, subgrila este specificată numai pe grid-template-columns . Proprietatea grid-template-rows are o listă de piese specificată. Urmele coloanelor vor rămâne, prin urmare, ca cele patru piste pe care le-am văzut mai sus, dar pistele rândului pot fi definite separat de pistele părintelui.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: 10em 5em 200px 200px; }

Aceasta înseamnă că rândurile subgrilei vor fi imbricate în interiorul grilei părinte, la fel ca atunci când creați o grilă imbricată astăzi. Deoarece grila noastră imbricată se întinde pe două rânduri ale părintelui, unul sau ambele rânduri va trebui să se extindă pentru a conține conținutul subgrilei, pentru a nu provoca depășiri.

De asemenea, ați putea avea o subgrilă într-o dimensiune, iar cealaltă dimensiune să folosească trasee implicite. În exemplul de mai jos, nu am specificat nicio pistă de rând și am dat o valoare pentru grid-auto-rows . Rândurile vor fi create în grila implicită la dimensiunea pe care am specificat-o și, ca și în exemplul anterior, părintele va trebui să aibă loc pentru aceste rânduri sau să se extindă pentru a le conține.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-auto-rows: minmax(200px, auto); }

Numerotarea liniilor și subgrila

Dacă ne uităm din nou la primul nostru exemplu, dimensiunea pistei subgrilei noastre este dictată de părinte în ambele dimensiuni. Cu toate acestea, numerele de linii acționează ca normal în subgrilă. Prima linie de coloană în direcția în linie este linia 1, iar linia de la capătul îndepărtat al direcției în linie este linia -1. Nu vă referiți la liniile subgrilei cu numărul de linie al părintelui.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; } .subitem { grid-column: 2 / 4; grid-row: 2; }

Goluri și subgrile

Subgrila va moșteni orice spațiu de coloană sau rând stabilit pe grila părinte, cu toate acestea, acest lucru poate fi anulat de golurile de coloane și rânduri specificate în subgrilă. Dacă, de exemplu, grila părinte avea un column-gap setat la 20 px, dar subgrila avea atunci column-gap setat la 0, celulele grilei din subgrilă ar câștiga 10 px pe fiecare parte pentru a reduce decalajul la 0, cu linia grilei care curge în esență pe mijlocul golului.

Putem vedea acum cum ne-ar ajuta subgrid să rezolvăm al doilea caz de utilizare de la începutul acestui articol, acela de a avea carduri cu anteturi și subsoluri care se aliniază peste carduri.

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: auto 1fr auto; grid-gap: 20px; } .card { grid-row: auto / span 3; /* use three rows of the parent grid */ display: grid; grid-template-rows: subgrid; grid-gap: 0; /* set the gap to 0 on the subgrid so our cards don't have gaps */ }

Nume de linii și subgrilă

Orice nume de linii din grila părinte vor fi transmise în subgrilă. Prin urmare, dacă am denumit liniile pe grila noastră părinte, am putea poziționa elementul în funcție de acele nume de linii.

 .grid { display: grid; grid-template-columns: [a] 1fr [b] 2fr [c] 1fr [d] 2fr [e] 1fr [f] 2fr [g]; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: 10em 5em 200px 200px; } .subitem { grid-column: c / e; }

De asemenea, puteți adăuga nume de linii la subgrilă, liniile de grilă pot avea mai multe nume de linii, astfel încât aceste nume să fie adăugate la linii. Pentru a specifica nume de linii, adăugați o listă a acestor nume după valoarea subgrid a grid-template-columns și grid-template-rows . Dacă luăm exemplul nostru de mai sus și adăugăm, de asemenea, nume la liniile subgrilei, vom ajunge cu două nume de linii pentru orice linie din subgrilă.

 .grid { display: grid; grid-template-columns: [a] 1fr [b] 2fr [c] 1fr [d] 2fr [e] 1fr [f] 2fr [g]; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid [sub-a] [sub-b] [sub-c] [sub-d] [sub-e]; grid-template-rows: 10em 5em 200px 200px; } .subitem { grid-column: c / e; }

Piese și subgrid implicite

Odată ce ați decis că o dimensiune a grilei dvs. este o subgrilă, acest lucru elimină posibilitatea de a avea orice piste implicite suplimentare în acea dimensiune. Dacă adăugați mai multe articole care se pot potrivi, elementele suplimentare vor fi plasate în ultima pista disponibilă a subgrilei în același mod în care articolele sunt tratate în grile prea mari. O zonă de grilă creată în subgrilă care se întinde pe mai multe piese decât sunt disponibile, va avea ultima linie setată la ultima linie a subgrilei.

După cum s-a explicat mai sus, totuși, puteți avea ca o dimensiune a subgrilei dumneavoastră să se comporte exact în același mod ca o grilă imbricată normală, inclusiv pistele implicite.

Implicarea în proces

Lucrarea Grupului de lucru CSS are loc în public, pe GitHub, la fel ca orice alt proiect open-source. Acest lucru face oarecum mai ușor de urmărit împreună cu munca că totul s-a întâmplat într-o listă de corespondență. Puteți arunca o privire asupra problemelor ridicate față de Nivelul 2 al specificației CSS Grid căutând probleme etichetate ca css-grid-2 în depozitul GitHub CSS Working Group. Dacă puteți contribui cu gânduri sau cu un caz de utilizare la oricare dintre aceste probleme, ar fi binevenit.

Există și alte funcții pe care oamenii le-au solicitat pentru CSS Grid Layout, iar faptul că nu au fost incluse în Nivelul 2 nu înseamnă că nu sunt luate în considerare. Puteți vedea nivelurile așa cum ar putea fi o lansare de caracteristici într-un produs, doar pentru că o caracteristică nu face parte din sprintul actual, nu înseamnă că nu se va întâmpla niciodată. Lucrul pe noi funcții ale platformei web tinde să dureze puțin mai mult decât lansarea medie a produsului, dar este un proces similar.

Cât durează toate acestea?

Dezvoltarea specificațiilor și implementarea browserului este un proces oarecum circular, iterativ. Nu este cazul că specificația trebuie să fie „terminată” înainte de a vedea unele implementări ale browserului. Este posibil ca implementările inițiale să se afle în spatele semnalizatoarelor de caracteristici – la fel cum a fost specificația originală a grilei. Fiți atenți la apariția acestora, deoarece odată ce există codul cu care să vă jucați, vă face să vă gândiți la aceste funcții mult mai ușor!

Sper că acest tur al ceea ce ar putea avea loc în curând a fost interesant. Sunt încântat că funcția subgrid este în curs de desfășurare, deoarece am crezut întotdeauna că este vitală pentru un sistem complet de layout grid pentru web, urmăriți acest spațiu pentru mai multe știri despre modul în care funcția progresează și despre implementările emergente ale browserului.