Συντόμευση για ευθυγράμμιση μέσα σε κελιά και στους δύο άξονες σε CSS Grid

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

Ας δούμε τη λειτουργία αυτής της ιδιότητας με παραδείγματα.

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

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

#parent {
	display: grid;
	place-items: center 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;
}

Ας δούμε το grid μας στον debugger:

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

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

#parent {
	display: grid;
	place-items: end 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 μας στον debugger:

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

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

#parent {
	display: grid;
	place-items: start 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;
}

Ας δούμε το grid μας στον debugger:

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

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

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

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