Η ιδιότητα grid-template-areas

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

Σύνταξη

επιλογέας {
	grid-template-areas: ονόματα θυγατρικών στοιχείων;
}

Παράδειγμα

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

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#elem1 {
	grid-area: first;
}
#elem2 {
	grid-area: second;
}
#elem3 {
	grid-area: third;
}

#parent {
	display: grid;
	grid-template-areas: 'second first third';
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Και τώρα ας χρησιμοποιήσουμε μια τελεία '.' αντί για τα ονόματα μερικών στοιχείων. Όπως φαίνεται από το αποτέλεσμα του εκτελεσμένου κώδικα σε αυτήν την περίπτωση θα τοποθετηθεί ένα κενό κελί στο σχήμα:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#elem1 {
	grid-area: first;
}
#elem2 {
	grid-area: second;
}
#elem3 {
	grid-area: third;
}
#parent {
	display: grid;
	grid-template-areas: 'first . second third';
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Δείτε επίσης

η ιδιότητα grid-area,
που ορίζει το όνομα του στοιχείου στο πλέγμα