Στοίχιση μεμονωμένου στοιχείου κατά τον οριζόντιο άξονα του CSS Grid

Η στοίχιση κατά τον οριζόντιο άξονα μπορεί να οριστεί όχι μόνο στο γονικό στοιχείο, αλλά και για κάθε θυγατρικό ξεχωριστά. Για αυτόν τον σκοπό χρησιμοποιείται η ιδιότητα justify-self.

Στην αρχή του οριζόντιου άξονα

Ας ορίσουμε τη στοίχιση για το πρώτο μας στοιχείο στην αρχή του οριζόντιου άξονα:

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

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}
#elem1 {
	justify-self: start;
}

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

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

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

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}
#elem1 {
	justify-self: center;
}

Στο τέλος του οριζόντιου άξονα

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

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

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}
#elem1 {
	justify-self: end;
}

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

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

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

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