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

Μπορείτε να στοιχίσετε ένα μεμονωμένο στοιχείο ταυτόχρονα και κατά τον οριζόντιο, και κατά τον κάθετο άξονα συνδυάζοντας τις ιδιότητες justify-self και align-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;
	align-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: center;
	align-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: end;
	align-self: center;
}

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

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

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

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

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