Savybė grid-template

Savybė grid-template nustato elemento užimamų eilučių ir stulpelių kiekį bei plotį tinkle ir yra sutrumpinta forma savybių grid-template-rows ir grid-template-columns. Eilutės ir stulpeliai, kuriuose bus talpinamas elementas nurodomi per brūkšnį. Savybė grid-template nustatoma tėvinio elemento ir apibrėžia dukterinių elementų išdėstymą. Savybės reikšmėje nurodome eilučių ar stulpelių plotį bet kuriuose dydžio vienetuose.

Nurodant savybėse reikšmes pikseliais, elementų dydžiai tiksliai atitiks juos. Jei mes nurodome žodį auto, tada stulpeliai ir eilutės užpildys visą prieinamą erdvę. Naudojant vienetą fr (frakcija) reiškia, kad visa erdvė bus padalinta į lygias dalis. Privalumas fr yra jo prisitaikymas prie skirtingų konteinerių ar ekrano raiškos, kadangi fr tiesiog padalina juos į nurodytą frakcijų kiekį be prisirišimo prie tikslaus dydžio pikseliais.

Sintaksė

selektorius {
	grid-template: eilučių plotis ir kiekis / stulpelių plotis ir kiekis;
}

Pavyzdys

Sukurkime lentelę naudodami savybę 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;
}

Pavyzdys

Dabar nustatykime antrai ir trečiai eilutėms vienodą plotį, o kiekvienam stulpeliui - skirtingą plotį:

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

Pavyzdys

Dabar iš ankstesnio pavyzdžio lentelės padarykime viršutinę eilutę dviejų frakcijų pločio, o pirmą stulpelį - pusės frakcijos pločio:

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

Taip pat žiūrėkite

savybė grid,
kuri nustato sutrumpintą stulpelių ir eilučių savybių formą
savybė grid-template-rows,
kuri nustato eilučių kiekį ir plotį tinkle
savybė grid-template-columns,
kuri nustato stulpelių kiekį ir plotį tinkle