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

Με παρόμοιο τρόπο μπορείτε να στοιχίσετε στοιχεία κατά τον κάθετο άξονα χρησιμοποιώντας την ιδιότητα align-self. Ας δούμε με παραδείγματα πώς λειτουργεί.

Στην αρχή του κάθετου άξονα

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

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">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 {
	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 {
	align-self: center;
}

Στο τέλος του κάθετου άξονα

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

<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 {
	align-self: end;
}

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

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

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

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