.cards { display: grid; grid-template-columns: 1fr; } @media (min-width: 768px) { .cards { grid-template-columns: 1fr 1fr; } }Telefonul primește o singură coloană, iar tableta și desktopul primesc două.
LECȚIA 72 DIN 100
Construiește mobile-first cu min-width
Pornește de la o coloană și extinde layoutul numai când există spațiu.
PASUL 1 · ÎNVAȚĂ
Cum funcționează
Într-o abordare mobile-first, regula de bază deservește ecranul mic. Media query cu min-width adaugă layoutul mai complex de la pragul ales în sus.
.cards { grid-template-columns: 1fr 1fr; } @media (min-width: 768px) { .cards { grid-template-columns: 1fr; } }Această ordine pornește cu varianta largă și o restrânge pe ecrane mari, deci nu este mobile-first.
PASUL 2 · APLICĂ
Exercițiul tău
Păstrează o coloană în baza CSS și definește două coloane de la 768px.
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
- ○Baza mobile-first are o coloană.
- ○De la 768px sunt două coloane.
- ○Elementul țintă este prezent în pagină.
Explică-mi logica rezolvării
Baza simplă reduce suprascrierile pe mobil, iar îmbunătățirea este activată progresiv prin min-width.