Omadus grid-template

Omadus grid-template määrab elemendi poolt võrgus või ruudustikus hõivatavate ridade ja veergude arvu ja laiuse ning on omaduste grid-template-rows ja grid-template-columns lühendatud vorm. Read ja veerud, kuhu element paigutatakse, määratakse kaldkriipsu abil. Omadus grid-template määratakse vanem-elemendis ja määrab alam-elementide paigutuse. Omaduse väärtuses märgime ridade või veergude laiuse suvalistes mõõtühikutes mõõtude jaoks.

Kui omadustes määratakse väärtused pikslites, vastavad elementide mõõtmed neile täpselt. Kui määrame sõna auto, siis veerud ja read täidavad kogu saadaoleva ruumi. Ühiku fr (fraktsioon) kasutamine tähendab, et kogu ruum jaguneb võrdseteks osadeks. fr eeliseks on selle vastupidavus erinevatele konteineritele või ekraani eraldusvõimetele, kuna fr jagab need lihtsalt määratud arvuks fraktsioonidest ilma seoseta täpse pikslite suurusega.

Süntaks

selektor {
	grid-template: ridade laius ja arv / veergude laius ja arv;
}

Näide

Loome omaduse grid-template abil tabeli:

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

Näide

Määrame nüüd teisele ja kolmandale reale sama laiuse, aga igale veerule erineva laiuse:

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

Näide

Teeme nüüd eelmise näite tabelis ülemise rea laiuseks kaks fraktsiooni, ja esimese veeru laiuseks poole fraktsiooni:

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

Vaata ka

omadus grid,
mis määrab veergude ja ridade omaduste lühendatud kirje
omadus grid-template-rows,
mis määrab võrgus olevate ridade arvu ja laiuse
omadus grid-template-columns,
mis määrab võrgus olevate veergude arvu ja laiuse