Ενοποίηση σειρών σε CSS Grid

Οι σειρές και οι στήλες στα grids σχηματίζουν ένα πλέγμα. Μπορούμε να κάνουμε ένα στοιχείο να καταλαμβάνει όχι ένα κελί του πλέγματος, αλλά πολλά.

Για να καταλάβει ένα στοιχείο περισσότερες από μία σειρές, πρέπει να του οριστεί η ιδιότητα grid-row. Σε αυτή την ιδιότητα, χωρισμένοι με κάθετο, ορίζονται αριθμοί που υποδεικνύουν την αρχική και την τελική θέση των στοιχείων στο grid.

Σε αυτή την περίπτωση, το στοιχείο θα εκταθεί από την πρώτη θέση έως τη δεύτερη θέση (χωρίς να την περιλαμβάνει). Δηλαδή η τιμή 1 / 2 θα κάνει το στοιχείο να καταλάβει μόνο το πρώτο κελί, ενώ η τιμή 1 / 3 θα κάνει το στοιχείο να καταλάβει το πρώτο και το δεύτερο κελί (αλλά όχι το τρίτο).

Παράδειγμα

Ας υποθέσουμε ότι έχουμε ένα grid με τρία θυγατρικά στοιχεία. Ας τα τοποθετήσουμε έτσι ώστε το πρώτο στοιχείο να καταλαμβάνει δύο σειρές:

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

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr;
	height: 300px;
	width: 400px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 3; /* δύο σειρές */
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
}

Παράδειγμα

Τώρα ας αναθέσουμε στο τέταρτο μπλοκ τρεις σειρές:

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

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr;
	height: 300px;
	width: 400px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
}
#elem4 {
	grid-row: 1 / 4;
}

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

Τοποθετήστε όλα τα στοιχεία και εκτελέστε την ενοποίηση σειρών σύμφωνα με το ακόλουθο παράδειγμα: