dexblog.ro
CSS Toate proprietățile CSS

grid-template-areas și grid-area în CSS

CSS Grid (Layout bidimensional) CSS3+

Creează un layout vizual intuitiv prin denumirea cu cuvinte a zonelor din grilă (header, sidebar, footer).

Sintaxă CSS 
grid-template-areas:
  "antet antet"
  "meniu corp"
  "subsol subsol";

header { grid-area: antet; }
nav    { grid-area: meniu; }
main   { grid-area: corp; }
footer { grid-area: subsol; }

Ce face grid-template-areas și grid-area

grid-template-areas este cea mai vizuală și spectaculoasă caracteristică din CSS: îți permite să „desenezi” structura paginii direct în fișierul CSS folosind șiruri de caractere.

Fiecare rând este scris între ghilimele, iar cuvintele reprezintă numele celulelor. Dacă un nume se repetă pe două coloane, zona respectivă se unește automat pe orizontală.

Valori uzuale

Valoare Descriere
"nume1 nume2" Denumește celulele din rândul respectiv.
. (punct) Indică o celulă goală (fără conținut).
grid-area Proprietate aplicată pe copil care îl asociază cu numele din grilă.

Exemple

Exemplul 1: Layout clasic de site descris textual

Codul CSS seamănă cu o schiță arhitecturală a paginii.

.pagina {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  gap: 16px;
}
header { grid-area: header; }
aside  { grid-area: sidebar; }
main   { grid-area: main; }
footer { grid-area: footer; }

Efect vizual în browser

Header-ul și footer-ul se întind pe ambele coloane, iar între ele stau bara laterală în stânga și conținutul în dreapta.

Greșeli frecvente

  • Formarea de zone care nu sunt dreptunghiulare (de exemplu, o formă de L sau T este strict interzisă; fiecare zonă denumită trebuie să fie un dreptunghi perfect).
  • Număr diferit de celule pe rânduri (toate șirurile dintre ghilimele trebuie să aibă exact același număr de cuvinte).

Comenzi înrudite