Die grid-template eienskap

Die eienskap grid-template spesifiseer die aantal en breedte van die rye en kolomme wat 'n element in 'n rooster of raster sal beset en is 'n verkorte vorm van die eienskappe grid-template-rows en grid-template-columns. Die rye en kolomme waarop die element geplaas sal word, word gespesifiseer deur 'n skuinsstreep. Die eienskap grid-template word in die ouerelement gespesifiseer en bepaal die plasing van die kindelemente. In die waarde van die eienskap spesifiseer ons die breedte van rye of kolomme in enige eenhede vir groottes.

As jy pixelwaardes in die eienskappe spesifiseer, sal die groottes van die elemente presies daaraan voldoen. As ons die woord auto spesifiseer, sal die kolomme en rye al die beskikbare spasie vul. Die gebruik van die eenheid fr (fraksie) beteken dat al die spasie verdeel sal word in gelyke dele. Die voordeel van fr is die aanpasbaarheid daarvan by verskillende houers of skermresolusies, aangesien fr dit eenvoudig verdeel in die gespesifiseerde aantal fraksies sonder om aan 'n presiese pixelgrootte gebonde te wees.

Sintaksis

selekteerder {
	grid-template: breedte en aantal rye / breedte en aantal kolomme;
}

Voorbeeld

Kom ons maak 'n tabel met behulp van die eienskap grid-template:

<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

En laat ons nou die tweede en derde rye dieselfde breedte gee, en elke kolom 'n ander 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

En nou, in die tabel van die vorige voorbeeld, laat ons die boonste ry twee fraksies breed maak, en die eerste kolom 'n halwe fraksie:

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

Sien ook

die eienskap grid,
wat 'n verkorte notasie van die kolom- en ryeienskappe verskaf
die eienskap grid-template-rows,
wat die aantal en breedte van rye in 'n rooster spesifiseer
die eienskap grid-template-columns,
wat die aantal en breedte van kolomme in 'n rooster spesifiseer