Săpătură în proprietatea de afișare: grile până în jos

Astăzi, vom arunca o privire la ceea ce se întâmplă atunci când folosim display: grid și cum am putea folosi noua valoare subgrid a grid-template-columns și grid-template-rows pentru a permite grile în jos prin marcajul nostru. , care se raportează între ele.

Acest articol face parte dintr-o serie care analizează diferite aspecte ale proprietății de display CSS și este o continuare a primelor două articole:

1. Cele două valori ale display
2. Box Generation
3. Grile până în jos

Ce se întâmplă când creăm un container grilă?

CSS Grid Layout este activat utilizând display: grid . Dacă ați citit primul articol din această serie, veți ști că ceea ce înseamnă de fapt această proprietate cu valoare unică este display: block grid . Obținem o casetă la nivel de bloc care este definită ca un container grilă , cu copii direcți care sunt elemente grilă și participă la aspectul grilei.

Dacă aruncați o privire la specificațiile afișajului, veți vedea că în tabelul care definește toate valorile diferite pentru display . Cuvintele container grilă sunt legate de definiția unui container grilă din specificația grilă. Prin urmare, pentru a afla ce înseamnă asta de fapt, trebuie să ne uităm acolo. Când o facem, obținem câteva clarificări utile cu privire la comportamentul unui container grilă.

Se spune că un container grilă stabilește un context de formatare grilă care este similar cu un context de formatare bloc (BFC). Am scris un ghid amplu pentru contextul de formatare a blocurilor. În acel articol veți descoperi două lucruri despre un BFC care sunt aceleași pentru un context de formatare a grilei. Flotantele nu intră în containerul grilă, iar marginile containerului nu se prăbușesc cu cele ale conținutului.

Există însă diferențe doar odată ce intrăm în containerul grilă. Copiii unui container grilă și care nu participă la layout-ul bloc și inline, sunt elemente de grilă și, prin urmare, participă la aspectul grilă. Aceasta înseamnă că câteva lucruri cu care suntem obișnuiți în layout-ul bloc și inline nu sunt adevărate.

Dacă orice element din aspect este flotat sau șters, proprietățile float și clear nu au efect odată ce elementul devine un element grilă. Proprietatea vertical-align nu are efect, iar pseudo-elementele ::first-letter și ::first-line nu pot fi utilizate.

Faptul că un element nu poate fi atât flotat, cât și un element grilă este util în ceea ce privește crearea de alternative. Când creați o rezervă pentru browsere care nu acceptă grid folosind floats (când grid este acceptat), nu trebuie să faceți nimic special: float-ul este suprascris.

Subliniez această abordare în articolul meu despre suportarea browserelor fără grilă. Există situații în care comportamentul s-a dovedit a fi problematic, deși aceste probleme ar putea fi rezolvate prin utilizarea unei alte părți a CSS, așa cum este descris în această postare, despachetarea unei probleme cu grila și floats, „Aspecte editoriale, excluderi și grilă CSS”.

Cu toate acestea spuse, dacă nu facem altceva decât să schimbăm valoarea display în grid , nu vom vedea o mare diferență la aspectul nostru. Copiii direcți sunt elemente de grilă, totuși, în mod implicit, ajungem cu o grilă cu o singură coloană. O grilă are întotdeauna o coloană și un rând. Restul rândurilor pe care le putem vedea după ce facem acest lucru sunt rânduri implicite, adică rânduri create pentru a păstra conținutul.

Putem începe să formăm ceva care arată mai mult ca o grilă pentru noi, dând o valoare proprietății grid-template-columns . Proprietatea ia o listă de piese ca valoare; dacă îi dau trei piese de 1fr, acum ne găsim cu o grilă cu trei coloane, iar utilizarea proprietății gap îmi oferă spațiu între acele cărți.

Acum avem ceva care ne arată ca o grilă:

Fiecare dintre elementele grilei din exemplul nostru are copii proprii. Cardurile au antet și subsol și o zonă pentru conținutul principal al cardului. Acești copii sunt elemente de grilă, dar copiii lor au revenit la aspectul bloc și inline. Antetul, zona de conținut și subsolul nu fac nicio grilă. Acest lucru se datorează faptului că atunci când schimbăm valoarea display -ului în grid , aceasta nu moștenește, ci doar copiii devin elemente grid; copiii lor revin la amenajarea blocului.

Grile de cuib

Dacă o carte are mai mult conținut decât celelalte cărți, cărțile din acel rând devin mai înalte. Valoarea inițială a elementelor de align-items grilei este stretch . Cărțile noastre se întind până la înălțimea maximă. Elementele din interior, totuși, sunt în bloc și flux normal și astfel nu se întind magic pentru a umple cardul. (De aceea, în imaginea de mai sus puteți vedea că cardurile cu conținut mai puțin au un decalaj în partea de jos.)

Dacă am fi vrut (pentru ca acel subsol să stea mereu în partea de jos), am putea face și elementul nostru grilă o grilă. În acest caz, o grilă cu o singură coloană este tot ce avem nevoie. Putem defini apoi piese de rând, dând zonei în care se află div -ul cu o clasă de conținut, o dimensiune a pistei de 1fr . Acest lucru face ca acesta să ocupe tot spațiul disponibil în container și va împinge subsolul în partea de jos a cardului.

Puteți face acest cuib de grile atât cât aveți nevoie. Nu prea cred că este imbricare, deoarece nu creăm tabele imbricate aici și, de obicei, folosim elementele HTML structurale deja existente. Schimbăm doar valoarea display pe rând la ceea ce este cel mai potrivit pentru copiii acelui element. Acesta poate fi aspect flexibil sau aspect grilă, dar cel mai adesea va fi aspect bloc și inline. În acest caz, nu trebuie să facem nimic, deoarece asta se întâmplă în mod implicit.

Alinierea antetelor și subsolurilor

După cum am văzut acum, dacă vrem un set de cărți așezate pe o grilă și vrem ca acestea să fie afișate la fel de înalt ca cel mai înalt card și vrem ca subsolurile să fie împinse în partea de jos a cardului, avem nevoie de foarte puțin CSS . Aspectul CSS pentru exemplul de mai sus este următorul:

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

Dar dacă dorim ca culoarea de fundal de pe antete și subsoluri să se alinieze? Fiecare card este un element de grilă, dar anteturile și subsolurile sunt în grila de pe articol. Nu au nicio relație unul cu celălalt și așa că nu îi putem alinia. Aici ar fi bine dacă am putea moșteni cumva grila prin copii.

Dacă am putea defini o grilă pe părintele care avea trei rânduri, atunci plasați cărțile pe aceste trei rânduri și puneți fiecare antet, conținut și subsol pe unul dintre rânduri. În acest fel, fiecare antet ar fi în același rând și, prin urmare, dacă un antet ar fi mai înalt, întregul rând ar deveni mai înalt.

Nu avem o soluție bună pentru asta în browsere astăzi, dar este pe drum. Caracteristica subgrilă a CSS Grid Layout Level 2 va activa acest model exact. Veți putea să creați o grilă pe elementul părinte și apoi să alegeți în mod selectiv rândurile și/sau coloanele pentru a utiliza acea grilă, mai degrabă decât să definiți o nouă grilă pe elementul child , care este complet independentă de acea grilă.

Rețineți că exemplele care urmează funcționează numai în momentul scrierii în Firefox Nightly. Valoarea subgrid -ului grid-template-columns și grid-template-rows este o caracteristică nouă și face parte din Nivelul 2 al Specificației Grid CSS. Pentru a încerca această funcție, descărcați o copie a Firefox Nightly.

Puteți vedea cum funcționează acest lucru în imaginile de mai jos. În prima imagine, am creat trei linii de rând pe părinte și am întins cardul peste ele. Cu Firefox Grid Inspector evidențiind grila, puteți vedea că rândurile părintelui nu au legătură cu rândurile folosite de copii.

Dacă, în loc să definesc trei rânduri pe copil, folosesc valoarea subgrid pentru grid-template-rows , cardul folosește acum acele rânduri pe părinte. Puteți vedea cum cele două sunt acum aliniate și, prin urmare, anteturile și subsolurile se aliniază de asemenea:

Ceea ce facem aici cu subgrid nu este o valoare nouă a display . Elementul care este o subgrilă este un container grilă în sine, deoarece am setat display: grid pe el. Elementele de grilă se comportă ca elementele de grilă se comportă în mod normal. Acesta este un aspect obișnuit al grilei - nu diferă de grila imbricată inițială, cu excepția faptului că (în loc ca elementul să aibă propria dimensiune a pistei de rând) folosește urmele părintelui.

 .cards { display: grid; gap: 20px; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: repeat(2,auto 1fr auto); } article { grid-row-end: span 3; display: grid; grid-template-rows: subgrid; }

Acesta este lucrul bun despre subgrid; nu există multe de învățat dacă știi deja cum să folosești aspectul grilă. Puteți citi despre restul detaliilor în postarea mea anterioară aici pe Smashing Magazine, „CSS Grid Level 2: Here Comes Subgrid”.

Ieri ( ²³ mai 2019), subgrid a aterizat în Firefox Nightly, așa că avem o implementare testabilă a valorii subgrid a grid-template-columns și grid-template-rows . Vă rugăm să luați o copie a Nightly și să încercați asta. Cu o copie a Nightly, puteți vedea exemplul final care funcționează în acest CodePen:

Vedeți dacă vă puteți gândi la alte cazuri de utilizare care sunt rezolvate prin funcția de subgrilă sau poate lucruri despre care credeți că lipsesc. În timp ce o funcție este disponibilă numai într-un browser Nightly, acesta este momentul în care este posibil să faceți modificări ale specificațiilor dacă sunt descoperite unele probleme. Așadar, faceți o favoare viitorului dvs. în dezvoltare web și încercați funcții ca aceasta, pentru a putea contribui la platforma web și pentru a îmbunătăți lucrurile.

Dacă credeți că ați găsit o eroare în implementarea Firefox, puteți arunca o privire la eroarea principală de implementare de pe Bugzilla, care trimite la probleme conexe în secțiunea Depinde de . Dacă nu vă puteți vedea problema, creați un caz de testare cât mai simplu posibil și ridicați eroarea. Dacă credeți că subgrid-ul ar trebui să facă ceva pentru a rezolva un caz de utilizare și acesta este ceva care nu este detaliat în specificație, puteți ridica o problemă pe Grupul de lucru CSS GitHub pentru o potențială îmbunătățire.

Ce zici display: contents ?

Dacă ați urmărit, ați putea crede că display: contents (așa cum este descris în articolul anterior despre display ) ar putea rezolva problemele pe care subgrid încearcă să le rezolve - aceea de a permite copiilor indirecti să participe la un aspect al grilei. Nu este cazul, iar exemplul nostru de cărți este o modalitate perfectă de a demonstra diferența.

Dacă, în loc să facem cardul nostru un aspect de grilă cu display: grid , am îndepărtat caseta folosind display: contents , am obține acest rezultat în următorul CodePen. (Încercați să eliminați display: contents din regulile pentru .card pentru a vedea diferența.)

În acest exemplu, caseta cardului a fost eliminată, astfel încât antetul, conținutul și subsolul participă direct la aspectul grilei și sunt plasate automat pe grilă. Nu era deloc ceea ce ne-am dorit! Valoarea contents de afișare va fi de mare ajutor odată ce problemele de accesibilitate în browsere menționate în ultimul meu articol sunt rezolvate, totuși, rezolvă probleme diferite față de cea pe care o explorăm.

Mai multe lecturi și exemple

Am creat o serie de exemple și demonstrații pentru a ajuta toată lumea să înțeleagă subgridul. Le puteți încerca la linkurile de mai jos:

• Exemple de grilă CSS Nivelul 2
• Grila CSS Nivelul 2: Aici vine Subgrid
• Grile până în jos (prezentare)
• Documentația MDN pentru subgrid