CSS Articole Grid. Denumirea elementelor grid. Elementele grid denumite.Proprietatea grid-template-areas.

Denumirea elementelor grid (Named grid items)

Proprietatea grid-area poate fi, de asemenea, utilizată pentru a atribui nume elementelor grid.



Elementele grid denumite (Named grid items) pot fi menționate de proprietatea grid-template-areas ale containerului grid.

Exemplu:

Item1 primește numele „myArea” și se întinde pe toate cele cinci coloane într-un grid layout de cinci coloane:

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea myArea myArea myArea';
}

Fiecare rând este definit prin apostroafe ('')

Coloanele din fiecare rând sunt definite în interiorul apostrofelor, separate de un spațiu.

Notă: Un semn de perioadă reprezintă un element grid fără nume.

Exemplu:

Permiteți „myArea” să întindă două coloane într-un aspect grid (grid layout) de cinci coloane (semnele de perioadă reprezintă elemente fără nume):

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea . . .';
}

Pentru a defini două rânduri, definiți coloana celui de-al doilea rând în interiorul unui alt set de apostroafe:

Exemplu:

Faceți din „item1” un interval de două coloane și două rânduri:

.grid-container {
   grid-template-areas: 'myArea myArea. . .“ 'myArea myArea. . . ";
}

Exemplu:

Denumiți toate articolele și creați un ready-to-use webpage template:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}