grid-template հատկությունը

grid-template հատկությունը սահմանում է տարրի կողմից grid-ում կամ ցանցում զբաղեցվող տողերի և սյուների քանակն ու լայնությունը և հանդիսանում է grid-template-rows և grid-template-columns հատկությունների համառոտ ձևը։ Տարրի տեղակայման տողերն ու սյուները նշվում են շեղ գծով։ grid-template հատկությունը սահմանվում է ծնող տարրում և սահմանում է ժառանգ տարրերի տեղակայումը։ Հատկության արժեքում մենք նշում ենք տողերի կամ սյուների լայնությունը ցանկացած չափման միավորով։

Երբ հատկություններում արժեքները նշվում են պիքսելներով, տարրերի չափերը կհամապատասխանեն դրանց ճշգրիտ։ Եթե մենք նշում ենք auto բառը, ապա սյուներն ու տողերը կլրացնեն բոլոր հասանելի տարածությունը։ fr (ֆրակցիա) միավորի օգտագործումը նշանակում է, որ ամբողջ տարածությունը կբաժանվի նույնական մասերի։ fr-ի առավելությունը նրա հարմարեցվելիությունն է տարբեր կոնտեյներների կամ էկրանի թույլատրելիությունների նկատմամբ, քանի որ fr պարզապես բաժանում է դրանք նշված քանակի ֆրակցիաների՝ առանց պիքսելներով ճշգրիտ չափին կապված լինելու։

Շարահյուսություն

ընտրիչ {
	grid-template: տողերի լայնությունն ու քանակը / սյուների լայնությունն ու քանակը;
}

Օրինակ

Եկեք 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;
}

Օրինակ

Իսկ այժմ եկեք երկրորդ և երրորդ տողերին տանք նույն լայնությունը, և յուրաքանչյուր սյունին՝ տարբեր լայնություն.

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

Օրինակ

Իսկ այժմ նախորդ օրինակի աղյուսակում վերին տողը դարձնենք երկու ֆրակցիա լայնությամբ, իսկ առաջին սյունը՝ կես ֆրակցիա լայնությամբ.

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

Տես նաև

grid հատկությունը,
որը սահմանում է սյուների և տողերի հատկությունների համառոտ գրառումը
grid-template-rows հատկությունը,
որը սահմանում է grid-ում տողերի քանակն ու լայնությունը
grid-template-columns հատկությունը,
որը սահմանում է grid-ում սյուների քանակն ու լայնությունը