Хосияти grid

Хосияти grid шакли мухтасари навишти ҳамаи хосиятҳои сутунҳо ва қаторҳои контейнери grid мебошад. Ҳамаи қиматҳо дар як сатр тавассути қат муқаррар карда мешаванд.

Тавассути grid дар як сатр танҳо як навъи хосиятҳоро метавон муайян кард - ощкора (grid-template-rows, grid-template-columns, grid-template-areas) ё ногощкора (grid-auto-rows, grid-auto-columns, grid-auto-flow). Хосиятҳое, ки муайян нашудаанд, қиматҳои пешфарзро қабул мекунанд.

Синтаксис

унсур {
	grid: хосиятҳои шабака;
}

Мисол

Биёед як ҷадвал бо истифодаи хосияти grid созем:

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

Мисол

Ва акнун биёед ба қаторҳои дуюм ва сеюм ҳамон паҳноиро муқаррар кунем, ва ба ҳар як сутун - паҳнои гуногун:

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

Мисол

Ва акнун дар ҷадвали мисоли қаблӣ қатори болоеро бо паҳнои дар ду фраксия созем, ва сутуни якумро - дар ним фраксия:

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

Нигаред низ

хосияти grid-template,
ки шумора ва паҳноии сутунҳо ва қаторҳоро барои унсур муайян мекунад
хосияти grid-template-rows,
ки шумора ва паҳноии қаторҳоро дар grid муайян мекунад
хосияти grid-template-columns,
ки шумора ва паҳноии сутунҳоро дар grid муайян мекунад
хосияти grid-template-areas,
ки ҷойгиршавии унсурҳоро дар grid муайян мекунад
хосияти grid-auto-flow,
ки ҷойгиршавии худкори унсурҳоро дар шабака муайян мекунад