De eigenschap grid-template

De eigenschap grid-template bepaalt het aantal en de breedte van de rijen en kolommen die een element in een grid of rooster zal innemen en is een verkorte vorm van de eigenschappen grid-template-rows en grid-template-columns. De rijen en kolommen waarop het element wordt geplaatst, worden gescheiden door een schuine streep. De eigenschap grid-template wordt ingesteld in het bovenliggende element en bepaalt de plaatsing van de onderliggende elementen. In de waarde van de eigenschap specificeren we de breedte van rijen of kolommen in willekeurige eenheden voor afmetingen.

Bij het opgeven van waarden in pixels in de eigenschappen zullen de afmetingen van de elementen hier exact aan voldoen. Als we het woord auto opgeven, zullen de kolommen en 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 aanpassingsvermogen aan verschillende containers of schermresoluties, omdat fr ze eenvoudig verdeelt in het opgegeven aantal fracties zonder binding aan een exacte grootte in pixels.

Syntaxis

selector {
	grid-template: breedte en aantal rijen / breedte en aantal kolommen;
}

Voorbeeld

Laten we met behulp van de eigenschap grid-template een tabel maken:

<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: 1fr 1fr 1fr / 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Voorbeeld

Laten we nu voor de tweede en derde rij dezelfde breedte instellen, en voor 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: 60px 1fr 60px / 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Voorbeeld

Laten we nu in de tabel uit het vorige voorbeeld de bovenste rij een breedte van twee fracties geven, 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: 2fr 1fr 1fr / 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,
die een verkorte notatie voor de eigenschappen van kolommen en rijen instelt
de eigenschap grid-template-rows,
die het aantal en de breedte van rijen in een grid bepaalt
de eigenschap grid-template-columns,
die het aantal en de breedte van kolommen in een grid bepaalt