Στοίχιση εντός των κελιών του CSS Grid κατά τον κάθετο άξονα

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

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

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

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

#parent {
	display: grid;
	align-items: flex-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 μας στο πρόγραμμα εντοπισμού σφαλμάτων του προγράμματος περιήγησης:

Στο κέντρο του άξονα

Τώρα ας στοιχίσουμε τα στοιχεία μας στα κελιά στο κέντρο του κάθετου άξονα:

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

#parent {
	display: grid;
	align-items: 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 μας στο πρόγραμμα εντοπισμού σφαλμάτων του προγράμματος περιήγησης:

Στο τέλος του άξονα

Ας αλλάξουμε ξανά τη στοίχιση των στοιχείων, αυτή τη φορά στο τέλος του κάθετου άξονα:

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

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

Ας δούμε το grid μας στο πρόγραμμα εντοπισμού σφαλμάτων του προγράμματος περιήγησης:

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

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

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

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