CSS Articole Grid. Denumirea elementelor grid. Elementele grid denumite.Proprietatea grid-template-areas.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
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';
}