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

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

Στο κέντρο των αξόνων

Ας στοιχίσουμε τα στοιχεία μας στο κέντρο του οριζόντιου και κάθετου άξονα:

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

#parent {
	display: grid;
	justify-items: center;
	align-items: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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 μας στον debugger:

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

Ας τοποθετήσουμε τα στοιχεία μας στα κελιά στην αρχή του οριζόντιου και στο τέλος του κάθετου άξονα:

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

#parent {
	display: grid;
	justify-items: start;
	align-items: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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 μας στον debugger:

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

Ας τοποθετήσουμε τα στοιχεία μας στα κελιά στο τέλος του οριζόντιου και στην αρχή του κάθετου άξονα:

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

#parent {
	display: grid;
	justify-items: end;
	align-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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 μας στον debugger:

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

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

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

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