Ominaisuus grid-template

Ominaisuus grid-template määrittää elementin gridissä tai verkossa käyttämien rivien ja sarakkeiden määrän ja leveyden ja on lyhennetty muoto ominaisuuksista grid-template-rows ja grid-template-columns. Rivit ja sarakkeet, joille elementti sijoitetaan, ilmoitetaan kauttaviivalla. Ominaisuus grid-template määritetään vanhempielementissä ja määrittää lapsielementtien sijainnin. Ominaisuuden arvossa määritämme rivien tai sarakkeiden leveydet missä tahansa koko-yksiköissä.

Kun ominaisuuksissa määritetään arvoja pikseleinä, elementtien koot vastaavat tarkasti niitä. Jos määritämme sanan auto, sarakkeet ja rivit täyttävät kaiken käytettävissä olevan tilan. Yksikön fr (fraktio) käyttö tarkoittaa, että koko tila jaetaan yhtä suuriin osiin. fr:n etuna on sen mukautuvuus erilaisiin säiliöihin tai näytön resoluutioihin, sillä fr yksinkertaisesti jakaa ne määritetyn määrän fraktioita ilman sidosta tarkkaan kokoon pikseleinä.

Syntaksi

valitsija {
	grid-template: rivien leveys ja määrä / sarakkeiden leveys ja määrä;
}

Esimerkki

Luodaan ominaisuuden grid-template avulla taulukko:

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

Esimerkki

Asetetaan nyt toiselle ja kolmannelle riville saman levyiset, ja jokaiselle sarakkeelle - eri leveydet:

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

Esimerkki

Tehdään nyt edellisen esimerkin taulukossa ylärivi kaksi fraktiota leveäksi, ja ensimmäinen sarake - puoli fraktiota:

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

Katso myös

ominaisuus grid,
joka määrittää sarakkeiden ja rivien ominaisuuksien lyhennetyn merkinnän
ominaisuus grid-template-rows,
joka määrittää rivien määrän ja leveyden gridissä
ominaisuus grid-template-columns,
joka määrittää sarakkeiden määrän ja leveyden gridissä