Хусусияти кӯтоҳнависи CSS grid

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

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

Намуна

Биёед бо истифода аз хусусияти 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: 600px;
	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: 600px;
	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: 600px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Вазифаҳои амалӣ

Намунаи зеринро амалӣ созед: