.layout { display: grid; grid-template-columns: 1fr 1fr; } @media (max-width: 720px) { .layout { grid-template-columns: 1fr; } }Desktopul folosește două coloane, iar telefonul le așază vertical fără schimbarea HTML-ului.
LECȚIA 71 DIN 100
Adaptează layoutul pe ecran îngust
Transformă două coloane într-o singură coloană când spațiul devine mic.
PASUL 1 · ÎNVAȚĂ
Cum funcționează
O media query aplică reguli numai când condiția sa este adevărată. Regula de bază păstrează două coloane, iar condiția max-width: 720px le înlocuiește cu una pe ecrane de cel mult 720px.
@media (min-width: 720px) { .layout { grid-template-columns: 1fr; } }min-width ar aplica o singură coloană începând de la 720px, adică în direcția opusă cerinței.
PASUL 2 · APLICĂ
Exercițiul tău
Păstrează grila de bază cu două coloane și completează media query pentru o coloană la maximum 720px.
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
- ○Regula de bază are două coloane.
- ○La maximum 720px grila are o coloană.
- ○Elementul țintă este prezent în pagină.
Explică-mi logica rezolvării
Regula din @media suprascrie numai numărul coloanelor când condiția de lățime este îndeplinită.