Bashkimi i rreshtave në CSS Grid

Rreshtat dhe kolonat në grid formojnë një rrjet. Mund të bëhet që një element të zërë jo një qelizë të rrjetit, por disa.

Që një element të zërë më shumë se një rresht, atij duhet t'i caktohet vetia grid-row. Në këtë veti, përmes një vije të pjerrët, jepen numrat që tregojnë pozicionin fillestar dhe atë përfundimtar të elementeve në grid.

Në këtë rast, elementi do të shtrihet nga pozicioni i parë deri në pozicionin e dytë (pa e përfshirë atë). Domethënë vlera 1 / 2 do ta detyrojë elementin të zërë vetëm qelizën e parë, ndërsa vlera 1 / 3 do ta detyrojë elementin të zërë qelizën e parë dhe të dytë (por pa përfshirë të tretën).

Shembull

Le të themi se kemi një grid me tre elementë fëmijë. Le t'i vendosim ata në mënyrë që elementi i parë të zërë dy rreshta:

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

Shembull

Tani le t'i caktojmë bllokut të katërt tre rreshta:

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

Detyra praktike

Vendosni të gjithë elementët dhe kryeni bashkimin e rreshtave në përputhje me shembullin e mëposhtëm: