Ιδιότητα place-items

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

Σύνταξη

επιλογέας {
	place-items: τιμή στοίχισης κατά οριζόντιο τιμή στοίχισης κατά κάθετο;
}

Παράδειγμα . Στοίχιση στο κέντρο του κάθετου και στην αρχή του οριζόντιου άξονα

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

#parent {
	display: grid;
	place-items: center start;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

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

Παράδειγμα . Στοίχιση στο τέλος του κάθετου και στο κέντρο του οριζόντιου άξονα

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

#parent {
	display: grid;
	place-items: end center;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	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>

#parent {
	display: grid;
	place-items: start end;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Ας δούμε τη στοίχιση στοιχείων σε κελιά με τη βοήθεια του προγράμματος εντοπισμού σφαλμάτων του browser:

Δείτε επίσης

η ιδιότητα justify-items,
που ορίζει τη στοίχιση των στοιχείων μέσα σε κελιά grid κατά τον οριζόντιο άξονα
η ιδιότητα align-items,
που ορίζει τη στοίχιση κατά τον εγκάρσιο άξονα