CSS Articole Grid. Elemente copil (Articole). Proprietatea grid-column. Proprietățiile grid-column-start și grid-column-end.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
Child Elements (Items)
Un container grid conține elemente grid.
În mod implicit, un container are un articol grid pentru fiecare coloană, în fiecare rând, dar puteți stila elementele gridului astfel încât acestea să se întindă pe mai multe coloane și / sau rânduri.
Proprietatea grid-column:
Proprietatea grid-column definește pe ce coloane (ele) să plaseze un articol.
Definiți unde va începe elementul și unde se va termina.
Notă: Proprietatea grid-column este o proprietate shorthand pentru proprietățiile grid-column-start și grid-column-end.
Pentru a plasa un articol, vă puteți referi la numere de linie sau puteți utiliza cuvântul cheie „span” pentru a defini câte coloane va cuprinde.
Exemplu:
Faceți ca „item1” să înceapă pe coloana 1 și să se încheie înainte de coloana 5:
.item1 {
grid-column: 1 / 5;
}
Exemplu:
Faceți „item1” să înceapă pe coloana 1 și să se întindă 3 coloane:
.item1 {
grid-column: 1 / span 3;
}
Exemplu:
Faceți „item2” să înceapă pe coloana 2 și să se întindă 3 coloane:
.item2 {
grid-column: 2 / span 3;
}