Aantal en breedte van rye in CSS-raster

Rasterelemente kan ook volgens rye geplaas word. Hiervoor is die eienskap grid-template-rows bedoel. Hierdie eienskap aanvaar die groottes van die rye, geskei deur spasies. Jy kan dieselfde waardes gebruik wat ons vir kolomme bestudeer het.

Voorbeeld

Laat ons blokke in vier rye plaas as voorbeeld:

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

Voorbeeld

Laat ons 'n vaste breedte in pixels vir die eerste en derde ry spesifiseer, en laat die tweede ry die oorblywende spasie inneem:

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

Voorbeeld

Laat ons die repeat funksie gebruik om die groottes van rye te spesifiseer:

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

Voorbeeld

Ken 'n hoogte van 50px aan die rye toe, en laat die aantal rye outomaties bepaal word deur die waarde 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;
}

Praktiese take

Plaas die blokke in drie rye. Laat die eerste blok 'n grootte van 100px hê, die tweede een 150px, en die derde een 200px.

Laat jou raster drie rye hê. Maak seker dat hulle dieselfde breedte het.