Στοίχιση περιεχομένου και στους δύο άξονες στο CSS Grid

Συχνά στο grid μπορεί να χρειαστεί να στοιχίσουμε ταυτόχρονα το περιεχόμενο κατά μήκος του οριζόντιου και του κάθετου άξονα του grid. Για αυτόν τον σκοπό μπορούμε να χρησιμοποιήσουμε από κοινού δύο ιδιότητες, που μελετήσατε στο προηγούμενο μάθημα: justify-content και align-content.

Στην αρχή του κάθετου και στο τέλος του οριζόντιου άξονα

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  justify-content: flex-end;
  align-content: flex-start;
  grid-template-columns: 100px 100px;
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Στο τέλος του κάθετου και στην αρχή του οριζόντιου άξονα

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  justify-content: flex-start;
  align-content: flex-end;
  grid-template-columns: 100px 100px;
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Στο κέντρο του κάθετου άξονα και του οριζόντιου

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  justify-content: flex-end;
  align-content: center;
  grid-template-columns: 100px 100px;
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Πρακτικές ασκήσεις