De eigenschap grid-template-rows

De eigenschap grid-template-rows bepaalt het aantal en de breedte van de rijen die een element in een grid of rooster zal innemen. In de waarde van de eigenschap specificeren we de breedte van de rijen in willekeurige eenheden voor afmetingen. De eigenschap wordt opgegeven in het ouder-element en bepaalt de breedte van de rijen van de kind-elementen.

Bij het opgeven van waarden in pixels in de eigenschappen zullen de afmetingen van de rijen hier exact aan voldoen. Als we het woord auto opgeven, dan zullen de rijen alle beschikbare ruimte opvullen. Het gebruik van de eenheid fr (fractie) betekent dat alle ruimte wordt verdeeld in gelijke delen. Het voordeel van fr is de aanpassbaarheid aan verschillende containers of schermresoluties, omdat fr ze simpelweg verdeelt in het opgegeven aantal fracties zonder binding aan een exacte afmeting in pixels.

Syntaxis

selector {
	grid-template-rows: rijbreedte;
}

Voorbeeld

Laten we de rijbreedte instellen voor onze elementen in het 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;
}

Voorbeeld

Laten we voor de eerste en derde rij een vaste breedte in pixels instellen, en laat de tweede rij automatisch de beschikbare ruimte opvullen:

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

Voorbeeld

Laten we nu met behulp van de eigenschap grid-template-rows ervoor zorgen dat de eerste en tweede rij één deel van de container innemen, en de derde rij - drie delen:

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

Voorbeeld

Waarden, opgegeven in eenheden fr kunnen fractionele waarden aannemen. Laten we het vorige voorbeeld aanpassen door voor de tweede en derde rij de breedte in gebroken getallen in te stellen:

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

Voorbeeld

Laten we in de eigenschap grid-template-rows de functie repeat() opgeven, die de container vertelt dat alle drie de rijen dezelfde breedte moeten hebben:

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

Voorbeeld

Laten we nu het vorige voorbeeld aanpassen zodat er aan de drie identieke rijen een vierde wordt toegevoegd, die twee fracties van de container zal innemen:

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

Voorbeeld

Laten we voor de eerste twee rijen een breedte van één fractie van de container instellen, en voor de laatste twee rijen - twee fracties:

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

Voorbeeld

Laten we nu de rijbreedte instellen door waarden te combineren, opgegeven met behulp van de functie repeat() en vrije eenheden 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;
}

Voorbeeld

Ook kan in de functie repeat() de waarde auto-fill worden opgegeven, die onze container zal vullen met identieke rijen van de gewenste breedte:

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

Voorbeeld

Het is erg handig om samen met auto-fill de functie minmax op te geven, die een bereik van rijbreedtes instelt van een minimale tot een maximale waarde. Als de breedte van de container niet alle rijen kan bevatten, dan zullen sommige ervan verplaatst worden naar een nieuwe regel, waarbij de rijen in de regel er gelijkmatig over worden verdeeld. Laten we het vorige voorbeeld aanpassen door daarin de functie minmax op te geven:

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

Voorbeeld

Laten we nu de eigenschap auto-fit opgeven, waarvan het verschil met auto-fill erin ligt, dat het het aantal rijen aanpast aan de beschikbare breedte van de container, door ze uit te breiden of samen te trekken:

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

Voorbeeld

Naast fr kunnen ook waarden in % worden gebruikt, die eveneens bepalen welk deel van de container de rij zal innemen. Hierbij wordt eerst de grootte van de rij in % berekend, en de overgebleven vrije ruimte wordt verdeeld in fracties:

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

Voorbeeld

Laten we samen de eigenschappen grid-template-columns en grid-template-rows gebruiken:

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

Voorbeeld

Laten we met behulp van de eigenschappen grid-template-columns en grid-template-rows een tabel maken van negen cellen, gerangschikt in drie rijen. Waarbij de tweede en derde rij dezelfde breedte hebben, en elke kolom - een verschillende breedte:

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

Voorbeeld

Laten we nu in de tabel uit het vorige voorbeeld de bovenste rij een breedte geven van twee fracties, en de eerste kolom - een halve fractie:

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

Zie ook

de eigenschap grid-template-columns,
die het aantal en de breedte van kolommen in een grid bepaalt
de eigenschap grid-auto-rows,
die het aantal en de breedte van rijen in een impliciet grid bepaalt