.page { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; } .site-header { grid-area: header; }Antetul și subsolul acoperă două coloane, iar bara laterală și conținutul împart rândul central.
LECȚIA 68 DIN 100
Numește zonele unei pagini
Descrie vizual o pagină cu antet, bară laterală, conținut și subsol.
PASUL 1 · ÎNVAȚĂ
Cum funcționează
grid-template-areas descrie fiecare rând printr-un șir de nume, iar grid-area leagă fiecare element de zona sa. Ordinea vizuală nu trebuie folosită pentru a înlocui o ordine HTML logică și accesibilă.
.page { grid-template-areas: "header main" "footer"; }Rândurile unei grile de zone trebuie să aibă același număr de celule, iar containerul trebuie să activeze Grid.
PASUL 2 · APLICĂ
Exercițiul tău
Definește cele trei rânduri de zone și atribuie fiecărui element numele potrivit.
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
- ○Pagina folosește Grid.
- ○Șablonul conține cele trei rânduri de zone.
- ○Antetul este atribuit zonei header.
- ○Bara laterală este atribuită zonei sidebar.
- ○Conținutul este atribuit zonei main.
- ○Subsolul este atribuit zonei footer.
- ○Elementul țintă este prezent în pagină.
Explică-mi logica rezolvării
Șablonul numește celulele, iar fiecare grid-area conectează elementul semantic existent la zona corespunzătoare.