Grid-template қасиеті

grid-template қасиеті тордағы элемент алатын жолдар мен бағандардың саны мен енін белгілейді және 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-template-columns қасиеті,
ол тордағы бағандардың саны мен енін белгілейді