Grid-template xassəsi

grid-template xassəsi griddə və ya şəbəkədə elementin tutacağı sıra və sütunların sayını və enini təyin edir və grid-template-rows və grid-template-columns xassələrinin qısaldılmış formasıdır. Elementin yerləşdiriləcəyi sıra və sütunlar slash işarəsi ilə göstərilir. grid-template xassəsi valideyn elementdə təyin olunur və övlad elementlərin yerleşimini müəyyən edir. Xassənin qiymətində sıra və ya sütunların enini istənilən ölçü vahidləri ilə göstəririk.

Xassələrdə piksel ilə qiymətlər göstərildikdə elementlərin ölçüləri tam olaraq onlara uyğun olacaq. auto sözünü təyin etsək, sütunlar və sıralar bütün mövcud yeri dolduracaq. fr vahidinin (fraksiya) istifadəsi bütün fəzanın eyni hissələrə bölünəcəyi mənasını verir. fr vahidinin üstünlüyü onun müxtəlif konteynerlərə və ya ekran ölçülərinə uyğunlaşmasıdır, çünki fr vahidi onları piksel cinsinden dəqiq ölçüyə bağlamadan göstərilən sayda fraksiyaya bölür.

Sintaksis

selektor {
	grid-template: sıraların eni və sayı / sütunların eni və sayı;
}

Nümunə

Gəlin grid-template xassəsindən istifadə edərək cədvəl yaradaq:

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

Nümunə

İndi isə ikinci və üçüncü sıralara eyni eni, hər sütuna isə müxtəlif en təyin edək:

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

Nümunə

İndi əvvəlki nümunədəki cədvəlin yuxarı sırasının enini iki fraksiya, birinci sütunun enini isə yarım fraksiya edək:

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

Həmçinin bax

grid xassəsi,
sütun və sıra xassələrinin qısaldılmış qeydini təyin edir
grid-template-rows xassəsi,
griddə sıraların sayını və enini təyin edir
grid-template-columns xassəsi,
griddə sütunların sayını və enini təyin edir