grid-template xususiyati

grid-template xususiyati grid yoki setkadagi element egallaydigan qatorlar va ustunlarning soni va kengligini belgilaydi va grid-template-rows va grid-template-columns xususiyatlarining qisqartirilgan shaklidir. Element joylashadigan qatorlar va ustunlar chiziq orqali ko'rsatiladi. grid-template xususiyati ota-elementda belgilanadi va farzand-elementlarning joylashishini aniqlaydi. Xususiyat qiymatida qatorlar yoki ustunlarning kengligini har qanday o'lchov birliklarida ko'rsatamiz.

Xususiyatlarda qiymatlar pikselda ko'rsatilganda elementlarning o'lchamlari aniq ularga mos keladi. Agar biz auto so'zini belgilasak, ustunlar va qatorlar barcha mavjud bo'shliqni to'ldiradi. fr (fraksiya) birligidan foydalanish barcha bo'shliq teng ulushlarga bo'linishini anglatadi. fr ning afzalligi uning turli konteynerlar yoki ekran o'lchamlariga moslashuvchanligidadir, chunki fr ularni aniq piksel o'lchamiga bog'lanmasdan ko'rsatilgan fraksiyalar soniga bo'ladi.

Sintaksis

selector {
	grid-template: qatorlarning kengligi va soni / ustunlarning kengligi va soni;
}

Misol

Keling, grid-template xususiyati yordamida jadval yarataylik:

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

Misol

Endi esa ikkinchi va uchinchi qatorlarga bir xil kenglik bering, va har bir ustunga - har xil kenglik bering:

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

Misol

Endi oldingi misordagi jadvalda yuqori qator kengligini ikkita fraksiyaga, birinchi ustunni - yarim fraksiyaga aylantiramiz:

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

Shuningdek qarang

grid xususiyati,
bu ustunlar va qatorlar xususiyatlarining qisqartirilgan yozuvini belgilaydi
grid-template-rows xususiyati,
bu griddagi qatorlarning soni va kengligini belgilaydi
grid-template-columns xususiyati,
bu griddagi ustunlarning soni va kengligini belgilaydi