Lastnost grid-template

Lastnost grid-template določa število in širino vrstic in stolpcev, ki jih bo element zasedel v mreži in je skrajšana oblika lastnosti grid-template-rows in grid-template-columns. Vrstice in stolpci, na katerih bo nameščen element, so označeni s poševnico. Lastnost grid-template je nastavljena v starševskem elementu in določa razporeditev podrejenih elementov. V vrednosti lastnosti podamo širino vrstic ali stolpcev v poljubnih enotah za velikosti.

Če v lastnostih podamo vrednosti v slikovnih pikah, bo velikost elementov natančno ustrezala tem vrednostim. Če podamo besedo auto, bodo stolpci in vrstice zapolnili ves razpoložljiv prostor. Uporaba enote fr (frakcija) pomeni, da bo ves prostor razdeljen na enake dele. Prednost fr je njegova prilagodljivost različnim vsebnikom ali ločljivostim zaslona, saj fr preprosto razdeli prostor na navedeno število frakcij brez povezave z natančno velikostjo v slikovnih pikah.

Sintaksa

selektor {
	grid-template: širina in število vrstic / širina in število stolpcev;
}

Primer

Ustvarimo tabelo z uporabo lastnosti 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;
}

Primer

Zdaj pa nastavimo drugi in tretji vrstici enako širino, vsakemu stolpcu pa različno širino:

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

Primer

Zdaj pa v tabeli iz prejšnjega primera naredimo zgornjo vrstico široko dve frakciji, prvi stolpec pa pol frakcije:

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

Glejte tudi

lastnost grid,
ki določa skrajšan zapis lastnosti stolpcev in vrstic
lastnost grid-template-rows,
ki določa število in širino vrstic v mreži
lastnost grid-template-columns,
ki določa število in širino stolpcev v mreži