Veturia grid-template-rows

Veturia grid-template-rows përcakton numrin dhe gjerësinë e rreshtave, të cilat do të zërë elementi në grid ose rrjetë. Në vlerën e vetisë specifikojmë gjerësinë e rreshtave në çdo njësi për madhësi. Veturia specifikohet në elementin-prind dhe përcakton gjerësinë e rreshtave të elementëve-të pasardhës.

Gjatë specifikimit të vlerave në veti në piksel madhësitë e rreshtave do të korrespondojnë saktësisht me to. Nëse përdorim fjalën auto, atëherë rreshtat do të mbushin të gjithë hapësirën e disponueshme. Përdorimi i njësisë fr (fraksion) do të thotë, që e gjithë hapësira do të ndahet në pjesë të barabarta. Përparësia e fr është përshtatshmëria e saj ndaj kontejnerëve ose rezolucioneve të ndryshme të ekranit, pasi fr thjesht i ndan ato në numrin e specifikuar të fraksioneve pa lidhje me madhësinë e saktë në piksel.

Sintaksa

selektori {
	grid-template-rows: gjerësia e rreshtit;
}

Shembull

Le t'i caktojmë gjerësinë e rreshtave për elementët tanë në 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;
}

Shembull

Le t'i caktojmë rreshtit të parë dhe të tretë gjerësi fikse në piksel, kurse rreshti i dytë le të mbushë automatikisht hapësirën e disponueshme:

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

Shembull

Tani me ndihmën e vetisë grid-template-rows le të bëjmë që rreshtat e parë dhe të dytë të zënë një pjesë të kontejnerit, kurse rreshti i tretë - tre pjesë:

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

Shembull

Vlerat, të specifikuara në njësi fr mund të marrin formë thyesore. Le të ndryshojmë shembullin e mëparshëm, duke specifikuar për rreshtat e dytë dhe të tretë gjerësi në numra thyesorë:

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

Shembull

Le të përdorim në vetinë grid-template-rows funksionin repeat(), i cili do t'i tregojë kontejnerit, që të gjitha tri rreshtat duhet të kenë gjerësi të njëjtë:

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

Shembull

Tani le të ndryshojmë shembullin e mëparshëm në mënyrë që tre rreshtave të njëjtë t'u shtohet i katërti, i cili do të zërë dy fraksione të kontejnerit:

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

Shembull

Le t'u caktojmë dy rreshtave të parë gjerësi prej një fraksioni të kontejnerit, kurse dy rreshtave të fundit - prej dy fraksionesh:

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

Shembull

Tani le të vendosim gjerësinë e rreshtave duke kombinuar vlerat, të specifikuara me ndihmën e funksionit repeat() dhe njësive të lira 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;
}

Shembull

Gjithashtu në funksionin repeat() mund të specifikohet vlera auto-fill, e cila do të mbushë kontejnerin tonë me rreshta të njëjtë të gjerësisë së dëshiruar:

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

Shembull

Është shumë i përshtatshëm së bashku me auto-fill të specifikohet funksioni minmax, i cili vendos intervalin e gjerësisë së rreshtave nga vlera minimale deri te maksimale. Nëse gjerësia e kontejnerit nuk i përshtat të gjitha rreshtat, atëherë disa prej tyre do të zhvendosen në rresht të ri, me kusht që rreshtat në varg të shpërndahen në mënyrë të barabartë në të. Le të ndryshojmë shembullin e mëparshëm, duke specifikuar në të funksionin 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;
}

Shembull

Tani le të specifikojmë vetinë auto-fit, ndryshimi i së cilës nga auto-fill qëndron në faktin, që ajo e përshtat numrin e rreshtave me gjerësinë e disponueshme të kontejnerit, duke i zgjeruar ose duke i ngushtuar ato:

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

Shembull

Gjithashtu krahas fr mund të përdoren vlera në %, të cilat gjithashtu përcaktojnë se cilin pjesë të kontejnerit do të zërë rreshti. Kështu, së pari do të llogaritet madhësia e rreshtit në %, kurse hapësira e lirë e mbetur do të ndahet në fraksione:

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

Shembull

Le të përdorim së bashku vetitë grid-template-columns dhe 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;
}

Shembull

Le të krijojmë me ndihmën e vetive grid-template-columns dhe grid-template-rows një tabelë prej nëntë qelizash, të vendosura në tre rreshta. Me kusht që rreshtat e dytë dhe të tretë të kenë gjerësi të njëjtë, kurse çdo kolonë - gjerësi të ndryshme:

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

Shembull

Tani në tabelën nga shembulli i mëparshëm le të bëjmë që rreshti i sipërm të ketë gjerësi prej dy fraksionesh, kurse kolona e parë - prej gjysmë fraksioni:

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

Shihni gjithashtu

veturia grid-template-columns,
e cila përcakton numrin dhe gjerësinë e kolonave në grid
veturia grid-auto-rows,
e cila përcakton numrin dhe gjerësinë e rreshtave në grid implicit