Antal og bredde af rækker i CSS grids

Grid-elementer kan også placeres i rækker. Til dette formål bruges egenskaben grid-template-rows. Denne egenskab tager rækkestørrelser adskilt af mellemrum. Den kan bruge de samme værdier, som vi studerede for kolonner.

Eksempel

Lad os som eksempel placere blokkene i fire rækker:

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

Eksempel

Lad os angive en fast bredde i pixels for første og tredje række, og lad den anden række optage den tilbageværende plads:

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

Eksempel

Lad os bruge funktionen repeat for at angive rækkestørrelser:

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

Eksempel

Lad os give rækkerne en højde på 50px, og lad antallet af rækker indstilles automatisk ved hjælp af værdien 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;
}

Praktiske opgaver

Placer blokkene i tre rækker. Lad den første blok have en størrelse på 100px, den anden 150px, og den tredje 200px.

Lad din grid have tre rækker. Sørg for at de har samme bredde.