Īpašība grid-template

Īpašība grid-template nosaka rindu un kolonnu skaitu un platumu, kuru elements aizņems gridā vai režģī un ir saīsināta forma īpašībām grid-template-rows un grid-template-columns. Rindas un kolonnas, kurās tiks izvietots elements, tiek norādītas caur slīpsvītru. Īpašība grid-template tiek noteikta vecākelementā un nosaka pēctečelementu izvietojumu. Īpašības vērtībā mēs norādām rindu vai kolonnu platumu jebkādās mērvienībās izmēriem.

Norādot īpašībās vērtības pikseļos, elementu izmēri precīzi atbilstīs tiem. Ja mēs norādām vārdu auto, tad kolonnas un rindas aizpildīs visu pieejamo vietu. Izmantojot mērvienību fr (frakcija) nozīmē, ka visa vieta tiks sadalīta vienādos daļās. Priekšrocība fr ir tā pielāgojamība dažādiem konteineriem vai ekrāna izšķirtspējām, jo fr vienkārši sadala tās norādītajā frakciju skaitā bez saistības ar precīzu izmēru pikseļos.

Sintakse

selektors {
	grid-template: rindu platums un skaits / kolonnu platums un skaits;
}

Piemērs

Ar īpašības grid-template palīdzību izveidosim tabulu:

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

Piemērs

Tagad piešķirsim otrajai un trešajai rindai vienādu platumu, un katrai kolonnai - atšķirīgu platumu:

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

Piemērs

Tagad tabulā no iepriekšējā piemēra izveidosim augšējo rindu ar platumu divās frakcijās, un pirmo kolonnu - pussfrakcijā:

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

Skatiet arī

īpašība grid,
kas nosaka īpašību saīsināto apzīmējumu kolonnām un rindām
īpašība grid-template-rows,
kas nosaka rindu skaitu un platumu gridā
īpašība grid-template-columns,
kas nosaka kolonnu skaitu un platumu gridā