Explorarea rețelei implicite a rețelei CSS și a puterilor de plasare automată

Când lucrați cu CSS Grid, primul lucru de făcut este să setați display: grid pe elementul pe care vrem să fim devin un container grilă. Apoi definim în mod explicit grila folosind o combinație de grid-template-columns, grid-template-rows, și grid-template-areas. Și de acolo, următorul pas este plasarea elementelor în interiorul grilei.

Aceasta este abordarea clasică care ar trebui folosită și o recomand și eu. Cu toate acestea, există o altă abordare pentru crearea grilelor fără nicio definiție explicită. Noi numim asta grilă implicită.

„Explicit, implicit? Ce naiba se întâmplă aici?”

Termeni ciudați, nu? Manuel Matuzovic deja are o explicatie buna a ceea ce putem prin „implicit” și „explicit” în CSS Grid, dar să cercetăm direct ce il specifica ț spune:

grid-template-rows, grid-template-columns, și grid-template-areas proprietățile definesc un număr fix de piste care se formează grila explicită. Atunci când elementele de grilă sunt poziționate în afara acestor limite, containerul de grilă generează trasee de grilă implicite prin adăugarea liniilor de grilă implicite la grilă. Aceste linii împreună cu forma explicită de grilă grila implicită.

Deci, în limba engleză simplă, browserul generează automat rânduri și coloane suplimentare în cazul în care se întâmplă să fie plasate elemente în afara grilei definite.

Dar plasarea automată?

Similar conceptului de grilă implicită, auto-plasare este capacitatea browserului de a plasa automat elementele în interiorul grilei. Nu trebuie să oferim întotdeauna poziția fiecărui articol.

Prin diferite cazuri de utilizare, vom vedea cum astfel de caracteristici ne pot ajuta să creăm o grilă complexă și dinamică cu câteva linii de cod.

Bara laterală dinamică

Aici, avem trei aspecte diferite, dar avem o singură configurație de grilă care funcționează pentru toate.

main {
  display: grid;
  grid-template-columns: 1fr;
}

Doar o coloană ocupă tot spațiul liber. Aceasta este grila noastră „explicită”. Este configurat pentru a se potrivi cu un element de grilă în main container grilă. Asta e tot. O coloană și un rând:

Dar dacă am decide să aruncăm un alt element acolo, să zicem an aside (bara noastră laterală dinamică). Așa cum este definită în prezent (și explicit), grila noastră va trebui să se ajusteze automat pentru a găsi un loc pentru acel element. Și dacă nu facem nimic altceva cu CSS-ul nostru, iată ce ne spune DevTools că se întâmplă.

Putem muta <aside> la o coloană de lângă <section>:

aside {
  grid-column-start: 2;
}

Și iată ce ne spune DevTools acum:

Ne plasăm elementul în a doua coloană, dar... nu avem o a doua coloană. Ciudat, nu? Nu am declarat niciodată o a doua coloană pe <main> container grid, dar browserul a creat unul pentru noi! Aceasta este partea cheie din specificația la care ne-am uitat:

Atunci când elementele de grilă sunt poziționate în afara acestor limite, containerul de grilă generează trasee de grilă implicite prin adăugarea liniilor de grilă implicite la grilă.

Această caracteristică puternică ne permite să avem machete dinamice. Dacă avem doar <section> element, tot ce obținem este o coloană. Dar dacă adăugăm un <aside> element la amestec, o coloană suplimentară este creată pentru a-l conține.

Am putea plasa <aside> inainte de <section> in schimb cam asa:

aside {
  grid-column-end: -2;
} 

Aceasta creează coloana implicită la începutul grilei, spre deosebire de codul anterior care plasează coloana implicită la sfârșit.

Putem face același lucru mai ușor folosind grid-auto-flow proprietate pentru a seta toate pistele implicite să curgă într-un column direcţie:

Acum nu mai este nevoie să specificați grid-column-start a plasa <aside> element din dreapta <section>! De fapt, orice alt element al grilei pe care decidem să îl aruncăm acolo în orice moment va curge acum într-o direcție de coloană, fiecare plasat în propriile piste implicite de grilă. Perfect pentru situațiile în care numărul de articole din grilă nu este cunoscut din timp!

Acestea fiind spuse, mai avem nevoie grid-column-end dacă vrem să-l plasăm într-o coloană din stânga acesteia deoarece, în caz contrar, <aside> va ocupa coloana explicită care, la rândul său, împinge <section> în afara grilei explicite și îl obligă să ia coloana implicită.

Știu, știu. Asta e un pic complicat. Iată un alt exemplu pe care îl putem folosi pentru a înțelege mai bine această mică ciudatenie:

În primul exemplu, nu am specificat nicio destinație de plasare. În acest caz, browserul va plasa mai întâi <aside> element în coloana explicită, deoarece este primul în DOM. The <section>, între timp, este plasat automat în coloana grilă pe care browserul o creează automat (sau implicit) pentru noi.

În al doilea exemplu, setăm <aside> element din afara grilei explicite:

aside {
  grid-column-end: -2;
}

Acum nu mai contează asta <aside> este primul în HTML. Prin reatribuire <aside> în altă parte, am făcut <section> element disponibil pentru a prelua coloana explicită.

Grila de imagini

Să încercăm ceva diferit cu o grilă de imagini în care avem o imagine mare și câteva miniaturi lângă ea (sau sub ea).

Avem două configurații de grilă. Dar ghicește ce? Nu definesc deloc nicio grilă! Tot ce fac este asta:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

Este surprinzător că avem nevoie de o singură linie de cod pentru a realiza ceva de genul acesta, așa că haideți să analizăm ce se întâmplă și veți vedea că este mai ușor decât credeți. Pentru inceput, grid-area este o proprietate scurtă care combină următoarele proprietăți într-o singură declarație:

• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end

Aștepta! Nu este grid-area proprietatea pe care o folosim pentru a defini zone denumite în loc de unde încep și se termină elementele pe grilă?

Da, dar face și mai mult. Am putea scrie mult mai multe despre grid-area, dar în acest caz particular:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* ...is equivalent to: */
.grid img:first-child {
  grid-row-start: span 3;
  grid-column-start: span 3;
  grid-row-end: auto;
  grid-column-end: auto;
}

Putem vedea același lucru când deschidem DevTools pentru a extinde versiunea scurtă:

Aceasta înseamnă că primul element de imagine din grilă trebuie să se extindă trei coloane și trei rânduri. Dar din moment ce nu am definit nicio coloană sau rând, browserul o face pentru noi.

În esență, am plasat prima imagine în HTML pentru a ocupa o grilă de 3⨉3. Aceasta înseamnă că orice alte imagini vor fi plasate automat în aceleași trei coloane, fără a fi nevoie să specificați ceva nou.

Pentru a rezuma, i-am spus browserului că prima imagine trebuie să ocupe spațiul de trei coloane și trei rânduri pe care nu le-am definit niciodată în mod explicit la configurarea containerului grilă. Browserul a setat acele coloane și rânduri pentru noi. Ca urmare, imaginile rămase din HTML se instalează direct folosind aceleași trei coloane și rânduri. Și deoarece prima imagine ocupă toate cele trei coloane din primul rând, imaginile rămase curg în rânduri suplimentare care conțin fiecare trei coloane, unde fiecare imagine ocupă o singură coloană.

Toate acestea dintr-o singură linie de CSS! Aceasta este puterea rețelei „implicite” și a plasării automate.

Pentru a doua configurație a rețelei din acea demonstrație, tot ce am făcut a fost să schimb direcția automată a fluxului folosind grid-auto-flow: column la fel am procedat mai devreme când am plasat un <aside> element de lângă a <section>. Acest lucru obligă browserul să creeze un Al patrulea coloană pe care o poate folosi pentru a plasa imaginile rămase. Și deoarece avem trei rânduri, imaginile rămase sunt plasate în aceeași coloană verticală.

Trebuie să adăugăm câteva proprietăți imaginilor pentru a ne asigura că se potrivesc bine în grilă, fără nici un depășire:

.grid {
  display: grid;
  grid-gap: 10px;
}

/* for the second grid configuration */
.horizontal {
  grid-auto-flow: column;
}

/* The large 3⨉3 image */
.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* Help prevent stretched or distorted images */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Și, desigur, putem actualiza cu ușurință grila pentru a lua în considerare mai multe imagini prin ajustarea unei valori. Asta ar fi 3 în stilurile pentru imaginea mare. Avem asta:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

Dar am putea adăuga o a patra coloană pur și simplu schimbând-o în 4 in schimb:

.grid img:first-child {
  grid-area: span 4 / span 4;
}

Și mai bine: să setăm asta ca proprietate personalizată pentru a face lucrurile și mai ușor de actualizat.

Aspecte dinamice

Primul caz de utilizare cu bara laterală a fost primul nostru aspect dinamic. Acum vom aborda aspecte mai complexe în care numărul de elemente va dicta configurația grilei.

În acest exemplu, putem avea oriunde de la unul la patru elemente în care grila se ajustează într-un mod care se potrivește frumos cu numărul de elemente, fără a lăsa goluri incomode sau spații lipsă.

Când avem un element, nu facem nimic. Elementul se va întinde pentru a umple singurul rând și coloana create automat de grilă.

Bit când adăugăm al doilea element, creăm o altă coloană (implicit) folosind grid-column-start: 2.

Când adăugăm un al treilea element, acesta ar trebui să ocupe lățimea a două coloane - de aceea am folosit grid-column-start: span 2, dar numai dacă este vorba de :last-child pentru că dacă (și când) adăugăm un al patrulea element, acesta ar trebui să ocupe doar o singură coloană.

Adăugând asta, avem patru configurații de grilă doar cu două declaraţii și magia grilei implicite:

.grid {
  display: grid;
}
.grid :nth-child(2) {
  grid-column-start: 2;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}

Hai să încercăm altul:

Nu facem nimic pentru primul și al doilea caz în care avem doar unul sau două elemente. Când adăugăm un al treilea element, totuși, îi spunem browserului că - atâta timp cât este :last-child — ar trebui să se întinde pe două coloane. Când adăugăm un al patrulea element, îi spunem browserului că acel element trebuie să fie plasat în a doua coloană.

.grid {
  display: grid;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}
.grid :nth-child(4) {
  grid-column-start: 2;
}

Începi să înțelegi truc? Oferim browserului instrucțiuni specifice în funcție de numărul de elemente (folosind :nth-child) și, uneori, o instrucțiune poate schimba complet aspectul.

Trebuie remarcat faptul că dimensionarea nu va fi aceeași atunci când lucrăm cu conținut diferit:

Deoarece nu am definit nicio dimensiune pentru articolele noastre, browserul le dimensionează automat pentru noi în funcție de conținutul lor și este posibil să ajungem la dimensiuni diferite față de ceea ce tocmai am văzut. Pentru a depăși acest lucru, trebuie explicit specificați că toate coloanele și rândurile au dimensiuni egale:

grid-auto-rows: 1fr;
grid-auto-columns: 1fr;

Hei, încă nu ne-am jucat cu acele proprietăți! grid-auto-rows și grid-auto-columns setați dimensiunea rândurilor și, respectiv, coloanelor implicite într-un container grid. Sau, ca spec o explică:

grid-auto-columns și grid-auto-rows proprietățile specifică dimensiunea pistelor pentru care nu este atribuită o dimensiune de grid-template-rows or grid-template-columns.

Iată un alt exemplu în care putem merge până la șase elemente. De data aceasta vă voi lăsa să disecați codul. Nu vă faceți griji, selectoarele pot părea complexe, dar logica este destul de simplă.

Chiar și cu șase elemente, aveam nevoie doar de două declarații. Imaginați-vă toate aspectele complexe și dinamice pe care le putem realiza cu câteva linii de cod!

Ce se întâmplă cu asta grid-auto-rows si de ce iau trei valori? Definim trei rânduri?

Nu, nu definim trei rânduri. Dar noi sunt definind trei valori ca model pentru rândurile noastre implicite. Logica este următoarea:

• Dacă avem un rând, acesta va fi dimensionat cu prima valoare.
• Dacă avem două rânduri, primul primește prima valoare și al doilea a doua valoare.
• Dacă avem trei rânduri, cele trei valori vor fi folosite.
• Dacă avem patru rânduri (și aici vine partea interesantă), folosim cele trei valori pentru primele trei rânduri și reutilizam prima valoare pentru al patrulea rând. De aceea este un fel de model pe care îl repetam pentru a mări toate rândurile implicite.
• Dacă avem 100 de rânduri, acestea vor fi dimensionate trei câte trei pentru a avea 2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr 1fr, Etc

Spre deosebire de grid-template-rows care definește numărul de rânduri și dimensiunile acestora, grid-auto-rows numai dimensiunile rând care pot fi create pe parcurs.

Dacă revenim la exemplul nostru, logica este să avem dimensiune egală atunci când sunt create două rânduri (vom folosi 2fr 2fr), dar dacă se creează un al treilea rând, îl facem puțin mai mic.

Modele de grilă

Pentru aceasta din urmă, vom vorbi despre tipare. Probabil ați văzut acele două forme de coloane în care o coloană este mai lată decât cealaltă și fiecare rând alternează plasarea acelor coloane.

Acest aspect de sortare poate fi dificil de realizat fără a ști exact cu cât conținut avem de-a face, dar puterile implicite de plasare automată ale CSS Grid îl fac relativ ușor.

Aruncă o privire la cod. Poate părea complex, dar haideți să-l defalcăm pentru că ajunge să fie destul de simplu.

Primul lucru de făcut este să identificați modelul. Întrebați-vă: „După câte elemente ar trebui să se repete modelul?” În acest caz, este după fiecare patru elemente. Deci, să ne uităm la utilizarea doar a patru elemente pentru moment:

Acum, să definim grila și să setăm modelul general folosind :nth-child selector pentru alternarea elementelor:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows equal to 100px */
}
.grid :nth-child(4n + 1) { /* ?? */ }
.grid :nth-child(4n + 2) { /* ?? */ }
.grid :nth-child(4n + 3) { /* ?? */ }
.grid :nth-child(4n + 4) { /* ?? */ }

Am spus că modelul nostru se repetă la fiecare patru elemente, așa că vom folosi logic 4n + x Unde x variază de la 1 la 4. Este puțin mai ușor să explici modelul astfel:

4(0) + 1 = 1 = 1st element /* we start with n = 0 */
4(0) + 2 = 2 = 2nd element
4(0) + 3 = 3 = 3rd element
4(0) + 4 = 4 = 4th element
4(1) + 1 = 5 = 5th element /* our pattern repeat here at n = 1 */
4(1) + 2 = 6 = 6th element
4(1) + 3 = 7 = 7th element
4(1) + 4 = 8 = 8th element
4(2) + 1 = 9 = 9th element /* our pattern repeat again here at n = 2 */
etc.

Perfect, nu? Avem patru elemente și repetă modelul pe al cincilea element, pe al nouălea element și așa mai departe.

Acestea :nth-child selectoarele pot fi dificile! Chris are o mare ajutor explicație despre cum funcționează totul, inclusiv rețete pentru crearea diferitelor modele.

Acum configuram fiecare element astfel incat:

1. Primul element trebuie să ia două coloane și să înceapă de la coloana unu (grid-column: 1/span 2).
2. Al doilea element este plasat în a treia coloană (grid-column-start: 3).
3. Al treilea element este plasat la prima coloană: (grid-column-start: 1).
4. Al patrulea element are două coloane și începe la a doua coloană: (grid-column: 2/span 2).

Aici este în CSS:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: 1/span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 3; }
.grid :nth-child(4n + 3) { grid-column-start: 1; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Ne-am putea opri aici și am terminat... dar putem face mai bine! Mai exact, putem elimina unele declarații și ne putem baza pe puterile de plasare automată a rețelei pentru a face treaba pentru noi. Aceasta este cea mai dificilă parte de grok și necesită multă practică pentru a putea identifica ce poate fi eliminat.

Primul lucru pe care îl putem face este să actualizăm grid-column: 1 /span 2 și folosiți numai grid-column: span 2 deoarece, implicit, browserul va plasa primul articol în prima coloană. Putem elimina și asta:

.grid :nth-child(4n + 3) { grid-column-start: 1; }

Prin plasarea primului, al doilea și al patrulea element, grila plasează automat al treilea element în locul corect. Asta înseamnă că am rămas cu asta:

.grid {
  display: grid;
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
  grid-auto-columns: 1fr; /* all the columns are equal */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Dar hai că putem să ne plimbăm mai bine! Putem elimina și asta:

.grid :nth-child(4n + 2) { grid-column-start: 2; }

De ce? Dacă plasăm al patrulea element în a doua coloană, în timp ce îi permitem să ocupe două coloane complete, forțăm grila să creeze o a treia coloană implicită, oferindu-ne un total de trei coloane fără să îi spunem în mod explicit. Al patrulea element nu poate intra în primul rând, deoarece primul element are, de asemenea, două coloane, deci trece la următorul rând. Această configurație ne lasă cu o coloană goală în primul rând și una goală în al doilea rând.

Cred că știi finalul poveștii. Browserul va plasa automat al doilea și al treilea element în acele locuri goale. Deci codul nostru devine și mai simplu:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Este nevoie doar de cinci declarații pentru a crea un model foarte cool și foarte flexibil. Partea de optimizare poate fi dificilă, dar te obișnuiești cu ea și câștigi câteva trucuri cu practica.

De ce să nu folosiți grid-template-columns pentru a defini coloane explicite, deoarece știm numărul de coloane?

Putem face asta! Iată codul pentru el:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1),
.grid :nth-child(4n + 4) {
  grid-column: span 2;
}

După cum puteți vedea, codul este cu siguranță mai intuitiv. Definim trei coloane de grilă explicite și îi spunem browserului că primul și al patrulea element trebuie să ia două coloane. Recomand cu caldura aceasta abordare! Dar scopul acestui articol este de a explora noi idei și trucuri pe care le obținem din puterile implicite și de plasare automată ale CSS Grid.

Abordarea explicită este mai simplă, în timp ce o grilă implicită vă cere să — scuzați jocul de cuvinte — să completați golurile în care CSS lucrează suplimentar în culise. În cele din urmă, cred că o înțelegere solidă a grilelor implicite vă va ajuta să înțelegeți mai bine algoritmul CSS Grid. La urma urmei, nu suntem aici pentru a studia ceea ce este evident - suntem aici pentru a explora teritoriile sălbatice!

Să încercăm un alt model, ceva mai rapid de data aceasta:

Modelul nostru se repetă la fiecare șase elemente. Al treilea și al patrulea element trebuie să ocupe fiecare două rânduri complete. Dacă plasăm al treilea și al patrulea element, se pare că nu trebuie să atingem celelalte, așa că să încercăm următoarele:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 3) {
  grid-area: span 2/2; /* grid-row-start: span 2 && grid-column-start: 2 */
}
.grid :nth-child(6n + 4) {
  grid-area: span 2/1; /* grid-row-start: span 2 && grid-column-start: 1 */
}

Hmm, nu e bine. Trebuie să plasăm al doilea element în prima coloană. În caz contrar, grila o va plasa automat în a doua coloană.

.grid :nth-child(6n + 2) {
  grid-column: 1; /* grid-column-start: 1 */
}

Mai bine, dar mai este de lucru. Trebuie să mutăm al treilea element în vârf. Este tentant să încerci să-l așezi pe primul rând astfel:

.grid :nth-child(6n + 3) {
  grid-area: 1/2/span 2; 
    /* Equivalent to:
       grid-row-start: 1;
       grid-row-end: span 2;
       grid-column-start: 2 
     */
}

Dar acest lucru nu funcționează pentru că forțează toate 6n + 3 elemente pentru a fi plasate în aceeași zonă care face un aspect amestecat. Soluția reală este păstrarea definiției inițiale a celui de-al treilea element și adăugarea grid-auto-flow: dense pentru a umple golurile. De la MDN:

[Algoritmul de împachetare „dens” încearcă să se umple în găuri mai devreme în grilă, dacă articole mai mici apar mai târziu. Acest lucru poate face ca articolele să pară necomandate, atunci când acest lucru ar umple găurile lăsate de articolele mai mari. Dacă este omis, se folosește un algoritm „rar”, în care algoritmul de plasare se mișcă „înainte” în grilă atunci când plasează elemente, fără să se întoarcă niciodată pentru a umple găurile. Acest lucru asigură că toate elementele plasate automat apar „în ordine”, chiar dacă acest lucru lasă găuri care ar fi putut fi umplute de articole ulterioare.

Știu că această proprietate nu este foarte intuitivă, dar nu o uitați niciodată atunci când vă confruntați cu o problemă de plasare. Înainte de a încerca diferite configurații în zadar, adăugați-o, deoarece vă poate repara aspectul fără efort suplimentar.

De ce nu adăugați întotdeauna această proprietate în mod implicit?

Nu o recomand pentru că, în unele cazuri, nu ne dorim acel comportament. Observați cum explicația MDN-ului menționează că face ca articolele să curgă „în afara ordinii” pentru a umple găurile lăsate de articolele mai mari. Ordinea vizuală este de obicei la fel de importantă ca și ordinea sursei, în special când vine vorba de interfețe accesibile și grid-auto-flow: dense poate provoca uneori o nepotrivire între ordinea vizuală și cea sursă.

Codul nostru final este atunci:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: dense;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 2) { grid-column: 1; }
.grid :nth-child(6n + 3) { grid-area: span 2/2; }
.grid :nth-child(6n + 4) { grid-row: span 2; }

Încă unul? Sa mergem!

Pentru aceasta, nu voi vorbi prea mult și vă arăt în schimb o ilustrare a codului pe care l-am folosit. Încercați să vedeți dacă înțelegeți cum am ajuns la acel cod:

Elementele cu negru sunt plasate implicit în grilă. Trebuie remarcat faptul că putem obține același aspect în mai multe moduri decât cum am ajuns acolo. Poți să-ți dai seama și tu de acestea? Ce zici de folosire grid-template-columns? Distribuie-ți lucrările în secțiunea de comentarii.

O să vă las cu un ultim model:

Eu fac au o solutie pentru acesta, dar este rândul tău să exersezi. Luați tot ce am învățat și încercați să codificați acest lucru singur și apoi comparați-l cu soluția mea. Nu vă faceți griji dacă încheiați cu ceva pronunțat - cel mai important lucru este găsirea unei soluții funcționale.

Vreau mai mult?

Înainte de a încheia, vreau să vă împărtășesc câteva întrebări Stack Overflow legate de CSS Grid, unde am sărit cu răspunsuri care folosesc multe dintre tehnicile pe care le-am acoperit aici împreună. Este o listă bună care arată câte cazuri reale de utilizare și situații din lumea reală apar în care aceste lucruri sunt utile:

La finalul

CSS Grid există de ani de zile, dar există încă o mulțime de trucuri puțin cunoscute și utilizate, care nu sunt discutate pe larg. Caracteristicile implicite de grilă și de plasare automată sunt două dintre ele!

Și da, acest lucru poate deveni provocator! Mi-a luat mult timp să înțeleg logica din spatele grilelor implicite și încă mă lupt cu plasarea automată. Dacă doriți să petreceți mai mult timp învârtindu-vă capul în jurul grilelor explicite și implicite, iată câteva explicații și exemple suplimentare care merită verificate:

În mod similar, poate doriți să citiți despre grid-auto-columns în Almanahul CSS-Tricks, deoarece Mojtaba Seyedi intră în detalii și include imagini incredibil de utile pentru a explica comportamentul.

După cum am spus când am început, metodele pe care le-am acoperit aici nu sunt menite să înlocuiască modalitățile obișnuite pe care le cunoașteți deja pentru a construi grile. Pur și simplu explorez diferite moduri care pot fi de ajutor în unele cazuri.