Grid häsiýeti

grid häsiýeti grid konteýneriniň ähli sütün we hatar häsiýetleriniň gysgaça ýazgy görnüşidir. Ähli bahalar bir setirde kesik çyzyk bilen ýazylýar.

grid bilen bir setirde diňe bir görnüşli häsiýetleri görnüşi ýazyp bolýar - açyk-aýdyň (grid-template-rows, grid-template-columns, grid-template-areas) ýa-da açyk-aýdyň däl (grid-auto-rows, grid-auto-columns, grid-auto-flow). Görkezilmedik galan häsiýetler öňünden bellänen bahalaryny alýar.

Sintaksis

element {
	grid: tor häsiýetleri;
}

Mysal

Geliň, grid häsiýetini ulanyp bir 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: 1fr 1fr 1fr / 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}

#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Mysal

Indi bolsa, ikinji we üçünji hatarlara deň giňlik bereliň, her sütüne bolsa parh-parh giňlik 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: 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 bolsa, öňki mysaldaky tablisanyň ýokarky hataryna iki fraksiýa giňlik bereliň, birinji sütüne bolma bolsa ýarym fraksiýa giňlik 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: 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-de görüň

grid-template häsiýeti,
element üçin sütün we hatarlaryň sanyny we giňligini kesgitleýär
grid-template-rows häsiýeti,
griddeki hatarlaryň sanyny we giňligini kesgitleýär
grid-template-columns häsiýeti,
griddeki sütünleriň sanyny we giňligini kesgitleýär
grid-template-areas häsiýeti,
elementleriň gridde ýerleşişini kesgitleýär
grid-auto-flow häsiýeti,
elementleriň tor üstünde awtomatiki ýerleşişini kesgitleýär