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

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

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

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

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

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

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

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

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

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

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

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

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

#parent {
	display: grid;
	align-content: 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 που αποτελείται από έξι στοιχεία, ταξινομημένα σε δύο σειρές. Εκτελέστε τη στοίχιση των στοιχείων στην αρχή του κάθετου άξονα του grid.

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

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