Миқдор ва паҳноии сутунҳо дар CSS Grids

Ошноӣ бо кори grid-ро мо аз он сар мекунем, ки миқдор ва паҳноии сутунҳоро таъин кунем, ки элементҳои фарзандӣ дар онҳо ҷойгир мешаванд. Барои ин мақсад мо аз хосияти grid-template-columns истифода мекунем, ки дар элементи волидайн таъин шуда ва миқдор ва паҳноии сутунҳоро муайян мекунад, ки элементҳои фарзандӣ дар grid ишғол мекунанд. Дар қимати хосият паҳноии сутунҳоро ба пиксел муайян мекунем.

Намуна

Биёед аввал элементҳои волидайн эҷод кунем ва онро grid-container кунем. Фарз мекунем, ки мо div дорем, ки дар он чор элементи фарзандӣ ҷойгир аст. Барои он дар хосияти display қимати grid таъин кунем, ва дар хосияти grid-template-columns паҳноиро барои ду сутун нависем:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 200px 400px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#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>

#parent {
	display: grid;
	grid-template-columns: 50px 100px 200px 250px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Машқҳои амалӣ

Фарз мекунем, ки шумо як div доред, ки нӯҳ элементи фарзандӣ дорад. Элементи волидайнро grid-container кунед.

Элементҳои фарзандӣро дар ду сутуни паҳноиашон 200px ҷойгир кунед.

Элементҳои фарзандӣро дар се сутуни паҳноиашон 150px ҷойгир кунед.

Элементҳои фарзандӣро дар се сутун ҷойгир кунед: якум паҳноиаш 100px, дуввум 150px, ва сеюм 200px.