Grid Container. Proprietatea grid-template-rows. Valoarea space-separated-list. Proprietatea justify-content.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
Proprietatea grid-template-rows definește înălțimea (height) fiecărui rând (row).
Valoarea este un space-separated-list, unde fiecare valoare definește înălțimea (height) rândului respectiv (row):
Exemplu:
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
Proprietatea justify-content
Proprietatea justify-content este utilizată pentru alinierea întregului grid în interiorul containerului.
Notă: Lățimea (width) totală a gridului trebuie să fie mai mică decât lățimea (width) containerului pentru ca proprietatea justify-content să aibă vreun efect.
Exemplu:
.grid-container {
display: grid;
justify-content: space-evenly;
}
Exemplu:
.grid-container {
display: grid;
justify-content: space-around;
}
Exemplu:
.grid-container {
display: grid;
justify-content: space-between;
}
Exemplu:
.grid-container {
display: grid;
justify-content: center;
}
Exemplu:
.grid-container {
display: grid;
justify-content: start;
}
Exemplu:
.grid-container {
display: grid;
justify-content: end;
}