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

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

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

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

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

#parent {
	display: grid;
	justify-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#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;
	justify-items: 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;
}

Ας δούμε τώρα το grid μας στο εργαλείο ανάπτυξης:

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

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

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

#parent {
	display: grid;
	justify-items: 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 σε δύο σειρές και ορίστε στοίχιση των στοιχείων στα κελιά στο κέντρο του οριζόντιου άξονα.

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