Αριθμός και πλάτος σειρών σε CSS πλέγματα

Τα στοιχεία του πλέγματος μπορούν επίσης να τοποθετηθούν σε σειρές. Για αυτό προορίζεται η ιδιότητα grid-template-rows. Αυτή η ιδιότητα δέχεται με κενό τα μεγέθη των σειρών. Μπορούν να εφαρμοστούν οι ίδιες τιμές που μελετήσαμε και για τις στήλες.

Παράδειγμα

Για παράδειγμα, ας τοποθετήσουμε τα μπλοκ σε τέσσερις σειρές:

<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: 600px;
}
#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: 600px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Ας χρησιμοποιήσουμε τη συνάρτηση repeat για τον καθορισμό των μεγεθών των σειρών:

<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: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Ας ορίσουμε για τις σειρές ύψος 50px, και τον αριθμό των σειρών ας τον ορίσουμε αυτόματα χρησιμοποιώντας την τιμή auto-fill:

<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;
}

Πρακτικές Ασκήσεις

Τοποθετήστε τα μπλοκ σε τρεις σειρές. Αφήστε το πρώτο μπλοκ να έχει μέγεθος 100px, το δεύτερο 150px, και το τρίτο 200px.

Αφήστε στο πλέγμα σας τρεις σειρές. Φροντίστε να έχουν το ίδιο πλάτος.