Antall og bredde på rader i CSS-grid

Grideoppsettets elementer kan også plasseres i rader. For dette formålet er egenskapen grid-template-rows brukt. Denne egenskapen tar inn størrelsene på radene, atskilt med mellomrom. Her kan vi bruke de samme verdiene som vi studerte for kolonner.

Eksempel

La oss som et eksempel plassere blokkene i fire 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;
}

Eksempel

La oss spesifisere en fast bredde i piksler for første og tredje rad, og la den andre raden ta opp den gjenværende plassen:

<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

La oss bruke funksjonen repeat for å angi radstørrelsene:

<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

La oss tildele radene en høyde på 50px, og la antall rader bli satt automatisk ved hjelp av verdien 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 oppgaver

Plasser blokkene i tre rader. La den første blokken ha en størrelse på 100px, den andre 150px, og den tredje 200px.

La ditt grid ha tre rader. Gjør slik at de har samme bredde.