Rivien yhdistäminen CSS-gridissä

Rivit ja sarakkeet muodostavat gridissä verkon. Voit tehdä niin, että elementti ei vie yhtä verkon solua, vaan useita.

Jotta elementti vie enemmän kuin yhden rivin, sille tulee asettaa ominaisuus grid-row. Tässä ominaisuudeta viivalla erotettuna annetaan luvut, jotka osoittavat alkavan ja loppuvan sijainnin elementeille gridissä.

Tällöin elementti venyy ensimmäisestä sijainnista toiseen sijaintiin (sisällyttämättä sitä). Toisin sanoen arvo 1 / 2 pakottaa elementin vievän yhden ensimmäisen solun, ja arvo 1 / 3 pakottaa elementin vievän ensimmäisen ja toisen solun (mutta sisällyttämättä kolmatta).

Esimerkki

Oletetaan, että meillä on gridi, jossa on kolme lasten elementtiä. Laitetaanpa ne niin, että ensimmäinen elementti vie kaksi riviä:

<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; /* kaksi riviä */
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
}

Esimerkki

Annetaanpa nyt neljännelle lohkolle kolme riviä:

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

Käytännön tehtävät

Sijoita kaikki elementit ja suorita rivien yhdistäminen vastaavasti seuraavan esimerkin mukaisesti: