Ιδιότητα grid-template

Η ιδιότητα grid-template ορίζει τον αριθμό και το πλάτος των σειρών και στηλών, που θα καταλαμβάνει ένα στοιχείο σε ένα grid ή πλέγμα και είναι μια συνοπτική μορφή των ιδιοτήτων grid-template-rows και grid-template-columns. Οι σειρές και οι στήλες, στις οποίες θα τοποθετηθεί το στοιχείο υποδεικνύονται με κάθετο. Η ιδιότητα grid-template ορίζεται στο γονικό στοιχείο και καθορίζει τη διάταξη των θυγατρικών στοιχείων. Στην τιμή της ιδιότητας ορίζουμε το πλάτος των σειρών ή των στηλών σε οποιεσδήποτε μονάδες για μεγέθη.

Όταν ορίζουμε στις ιδιότητες τιμές σε pixels τα μεγέθη των στοιχείων θα αντιστοιχούν ακριβώς σε αυτές. Αν ορίσουμε τη λέξη auto, τότε οι στήλες και οι σειρές θα γεμίζουν όλο τον διαθέσιμο χώρο. Η χρήση της μονάδας fr (κλάσμα) σημαίνει ότι όλος ο χώρος θα χωριστεί σε ίσα μέρη. Το πλεονέκτημα της fr είναι η προσαρμοστικότητά της σε διαφορετικά containers ή αναλύσεις οθόνης, καθώς η fr απλώς χωρίζει τον χώρο στον καθορισμένο αριθμό κλασμάτων χωρίς σύνδεση με ακριβές μέγεθος σε pixels.

Σύνταξη

επιλογέας {
	grid-template: πλάτος και αριθμός σειρών / πλάτος και αριθμός στηλών;
}

Παράδειγμα

Ας δημιουργήσουμε έναν πίνακα χρησιμοποιώντας την ιδιότητα grid-template:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Τώρα ας ορίσουμε στη δεύτερη και τρίτη σειρά το ίδιο πλάτος, και σε κάθε στήλη - διαφορετικό πλάτος:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid-template: 60px 1fr 60px / 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Τώρα στον πίνακα από το προηγούμενο παράδειγμα ας κάνουμε την επάνω σειρά πλάτους δύο κλασμάτων, και την πρώτη στήλη - σε μισό κλάσμα:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid-template: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Δείτε επίσης

η ιδιότητα grid,
που ορίζει τη συνοπτική γραφή των ιδιοτήτων στηλών και σειρών
η ιδιότητα grid-template-rows,
που ορίζει τον αριθμό και το πλάτος των σειρών στο grid
η ιδιότητα grid-template-columns,
που ορίζει τον αριθμό και το πλάτος των στηλών στο grid