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

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

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

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

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

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

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

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

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

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

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

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

Δημιουργήστε ένα grid, που αποτελείται από έξι στοιχεία και τοποθετήστε τα σε δύο στήλες. Εκτελέστε στοίχιση των στοιχείων στην αρχή του οριζόντιου και στο κέντρο του κάθετου άξονα του grid.

Τώρα τοποθετήστε τα στοιχεία του grid σε τρεις στήλες και ορίστε στοίχιση των στοιχείων στο κέντρο του οριζόντιου και στο τέλος του κάθετου άξονα του grid.

Αλλάξτε την προηγούμενη άσκηση, ώστε η στοίχιση των στοιχείων να γίνεται στο τέλος του οριζόντιου και στο κέντρο του κάθετου άξονα του grid.