Ευθυγράμμιση περιεχομένου κατά τον οριζόντιο άξονα στο CSS Grid

Στο grid μπορεί να χρειαστεί όχι μόνο να τοποθετήσουμε, αλλά και να ευθυγραμμίσουμε το περιεχόμενο κατά μήκος του οριζόντιου άξονα του grid. Σε αυτήν την περίπτωση χρησιμοποιούμε την ιδιότητα justify-content, η οποία ορίζεται στο γονικό στοιχείο. Ας δούμε με παραδείγματα, πώς λειτουργεί αυτή η ιδιότητα.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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