Grid-template häsiýeti

grid-template häsiýeti element grid ýa-da tor basjak hatarlaryň we sütünleriň sanyny we ini kesgitleýär we grid-template-rows we grid-template-columns häsiýetleriniň gysgaldylyp ýazylyşydyr. Element ýerleşdiriljek hatarlar we sütünler şlypa (/) bilen görkezilýär. grid-template häsiýeti ata elementde kesgitlenýär we çaga elementleriň ýerleşişini kesgitleýär. Häsiýetiň bahasynda hatarlaryň ýa-da sütünleriň ini islegli ölçeg birliklerinde görkezilýär.

Häsiýetlerde piksel bahalary görkezilende elementleriň ölçegleri takyk şol baha gabat gelýär. auto sözi görkezilende, sütünler we hatarlar elýeterli tutuş giňişligi eýelýär. fr birliginiň (fraksiýa) ulanylmagy, tutuş giňişligiň deň paýlara bölünjekdigini aňladýar. fr birikmesiniň artykmaçlygy ony dürli konteýnerlere ýa-da ekran çözgütlerine laýýyklykly edýändigi, sebäbi fr olary görkezilen fraksiýa sanyna pikseldäki takyk ölçege baglanmazdan bölýär.

Sintaksis

selektor {
	grid-template: hatarlaryň ini we sany / sütünleriň ini we sany;
}

Mysal

Geliň, grid-template häsiýetini ulanmak bilen tablisa düzeliň:

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

Mysal

Indi bolsa, ikinji we üçünji hatarlara deň ini bereliň, her sütüne bolsa tapawutly ini bereliň:

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

Mysal

Indi öňki mysaldaky tablisada ýokarky hatara iki fraksiýa ini, birinji sütüne bolsa ýarym fraksiýa ini bereliň:

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

Şeýle hem göz aýlaň

grid häsiýeti,
sütünleriň we hatarlaryň häsiýetleriniň gysgaldylyp ýazylyşyny berýär
grid-template-rows häsiýeti,
griddeki hatarlaryň sanyny we ini kesgitleýär
grid-template-columns häsiýeti,
griddeki sütünleriň sanyny we ini kesgitleýär