Grid Container. Proprietatea grid-template-rows. Valoarea space-separated-list. Proprietatea justify-content.

Proprietatea grid-template-rows

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;
}