.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }Pe un ecran îngust cardurile formează mai puține coloane, iar pe unul lat pot forma mai multe.
LECȚIA 70 DIN 100
Construiește o grilă fluidă de carduri
Lasă numărul coloanelor să răspundă automat spațiului disponibil.
PASUL 1 · ÎNVAȚĂ
Cum funcționează
repeat(auto-fit, minmax(220px, 1fr)) creează câte coloane încap, fiecare cu minimum 220px și posibilitatea de a crește. auto-fit contractă pistele goale, iar cardurile existente folosesc spațiul disponibil.
.cards { display: grid; grid-template-columns: repeat(4, 220px); }Patru coloane fixe pot depăși un ecran îngust și nu răspund automat spațiului disponibil.
PASUL 2 · APLICĂ
Exercițiul tău
Creează grila cu auto-fit, minmax(220px, 1fr) și gap 16px.
index.htmlCSS
Rezultat sigurizolat
Ciorna se păstrează doar în acest browser.HTML și CSS permise · scripturile și rețeaua sunt blocate
PASUL 4 · VERIFICĂ
Ce trebuie să treacă
0%neverificat
- ○Cardurile folosesc Grid.
- ○Numărul coloanelor se adaptează cu auto-fit și minmax.
- ○Coloanele și rândurile au gap 16px.
- ○Elementul țintă este prezent în pagină.
Explică-mi logica rezolvării
auto-fit adaptează numărul pistelor, minmax protejează lățimea minimă, iar 1fr distribuie spațiul rămas între coloanele existente.