Grid Container. Proprietatea align-content.

Proprietatea align-content

Proprietatea align-content este utilizată pentru alinierea verticală (vertically align) a întregului grid în interiorul containerului.



Notă: Înălțimea (height) totală a gridului trebuie să fie mai mică decât înălțimea (height) containerului pentru ca proprietatea align-content să aibă vreun efect.

Exemplu:

.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}

Exemplu:

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
}

Exemplu:

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
}

Exemplu:

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
}

Exemplu:

.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
}

Exemplu:

.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
}