Ιδιότητα grid-template-rows

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

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

Σύνταξη

επιλογέας {
	grid-template-rows: πλάτος σειράς;
}

Παράδειγμα

Ας ορίσουμε το πλάτος των σειρών για τα στοιχεία μας στο grid:

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

#parent {
	display: grid;
	grid-template-rows: 50px 100px 50px 50px;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Ας ορίσουμε για την πρώτη και τρίτη σειρά σταθερό πλάτος σε pixels, ενώ η δεύτερη σειρά ας γεμίσει αυτόματα τον διαθέσιμο χώρο:

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

#parent {
	display: grid;
	grid-template-rows: 100px auto 60px;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Τώρα χρησιμοποιώντας την ιδιότητα grid-template-rows ας κάνουμε έτσι ώστε η πρώτη και δεύτερη σειρά να καταλάβουν ένα μέρος του container, και η τρίτη σειρά - τρία μέρη:

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

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

Παράδειγμα

Οι τιμές που ορίζονται σε μονάδες fr μπορούν να πάρουν κλασματική μορφή. Ας αλλάξουμε το προηγούμενο παράδειγμα, ορίζοντας για τη δεύτερη και τρίτη σειρά πλάτος σε δεκαδικούς αριθμούς:

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

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

Παράδειγμα

Ας ορίσουμε στην ιδιότητα grid-template-rows τη συνάρτηση repeat(), η οποία θα ενημερώσει το container, ότι όλες οι τρεις σειρές πρέπει να έχουν το ίδιο πλάτος:

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

#parent {
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Τώρα ας αλλάξουμε το προηγούμενο παράδειγμα έτσι ώστε στις τρεις ίδιες σειρές να προστεθεί μια τέταρτη, η οποία θα καταλάβει δύο κλάσματα του container:

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

#parent {
	display: grid;
	grid-template-rows: repeat(3, 1fr) 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Ας ορίσουμε για τις πρώτες δύο σειρές πλάτος σε ένα κλάσμα του container, και για τις τελευταίες δύο σειρές - σε δύο κλάσματα:

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

#parent {
	display: grid;
	grid-template-rows: repeat(2, 1fr) repeat(2, 2fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Τώρα ας ορίσουμε το πλάτος των σειρών συνδυάζοντας τιμές, που ορίζονται με τη βοήθεια της συνάρτησης repeat() και ελεύθερων μονάδων fr:

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

#parent {
	display: grid;
	grid-template-rows: repeat(2, 1fr) 3fr repeat(2, 2fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Επίσης στη συνάρτηση repeat() μπορούμε να ορίσουμε την τιμή auto-fill, η οποία θα γεμίσει το container μας με ίδιες σειρές του επιθυμητού πλάτους:

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

#parent {
	display: grid;
	grid-template-rows: repeat(auto-fill, 50px);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Πολύ βολικό είναι μαζί με το auto-fill να ορίζουμε τη συνάρτηση minmax, η οποία ορίζει εύρος πλάτους σειρών από την ελάχιστη έως τη μέγιστη τιμή. Εάν το πλάτος του container δεν χωράει όλες τις σειρές, τότε μερικές από αυτές θα μετακινηθούν σε νέα γραμμή, ενώ οι σειρές στη γραμμή θα κατανεμηθούν ομοιόμορφα σε αυτήν. Ας αλλάξουμε το προηγούμενο παράδειγμα, ορίζοντας σε αυτό τη συνάρτηση minmax:

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

#parent {
	display: grid;
	grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Τώρα ας ορίσουμε την ιδιότητα auto-fit, η διαφορά της οποίας από το auto-fill έγκειται στο ότι αυτή προσαρμόζει τον αριθμό των σειρών στο διαθέσιμο πλάτος του container, διευρύνοντάς τες ή συμπιέζοντάς τες:

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

#parent {
	display: grid;
	grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Επίσης, παράλληλα με την fr μπορούμε να χρησιμοποιήσουμε τιμές σε %, οι οποίες επίσης καθορίζουν ποιο μέρος του container θα καταλάβει η σειρά. Σε αυτήν την περίπτωση πρώτα θα υπολογιστεί το μέγεθος της σειράς σε %, και ο εναπομείνας ελεύθερος χώρος θα χωριστεί σε κλάσματα:

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

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

Παράδειγμα

Ας χρησιμοποιήσουμε μαζί τις ιδιότητες grid-template-columns και grid-template-rows:

<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-rows: 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Ας χρησιμοποιώντας τις ιδιότητες grid-template-columns και grid-template-rows δημιουργήσουμε έναν πίνακα από εννέα κελιά, τοποθετημένα σε τρεις σειρές. Επιπλέον, η δεύτερη και τρίτη σειρά θα έχουν το ίδιο πλάτος, ενώ κάθε στήλη - διαφορετικό πλάτος:

<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-rows: 60px 1fr 60px;
	grid-template-columns: 20% 1fr 15%;
	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-rows: 2fr 1fr 1fr;
	grid-template-columns: 0.5fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Δείτε επίσης

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