Antal och bredd på rader i CSS-grid

Gridelement kan också placeras i rader. För detta används egenskapen grid-template-rows. Denna egenskap tar mellanslagsavgränsade radstorlekar. Samma värden som vi studerade för kolumner kan användas här.

Exempel

Låt oss som exempel placera blocken i fyra rader:

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

Exempel

Låt oss ange en fast bredd i pixlar för första och tredje raden, och låt den andra raden ta den återstående platsen:

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

Exempel

Låt oss använda funktionen repeat för att ange radstorlekar:

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

Exempel

Låt oss ge raderna en höjd på 50px, och ange antalet rader automatiskt med hjälp av värdet 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;
}

Praktiska uppgifter

Placera blocken i tre rader. Låt det första blocket ha storleken 100px, det andra 150px, och det tredje 200px.

Låt ditt grid ha tre rader. Gör så att de har samma bredd.