CSS gridlerinde sütunlaryň sany we ini

Grid bilen işlemegiň tanyşygyny biz sütunlaryň sanyny we inini bellemek bilen başlarys, olar arkaly ýaňy elementler ýerleşdiriler. Bu maksat üçin biz grid-template-columns atlandyryjysyny ulanarys, ol ata elementde görkezilýär we gridde ýaňy elementleriň eýelemegi üçin sütunlaryň sanyny we inini kesgitleýär. Atlandyryjynyň bahasynda sütunlaryň inini pikselde görkezýäris.

Mysal

Ilki bilen ata element döretmeli we ony grid konteýner eden etmeli. Bizde dört sany ýaňy elementi bolan div bolsun. Üçin onuň display atlandyryjysyna grid bahasyny, grid-template-columns atlandyryjysyna bolsa iki sütun üçin inini ýazmaly:

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

Mysal

Indi bolsa, dört sany dürli ölçegli sütuny bolan tablisany döretmeli:

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

Amaly meseleler

Size dokuz sany ýaňy elementi bolan div bar bolsun. Ata elementini grid konteýner eden ediň.

Ýaňy elementleri iki sany sütunda, her biriniň ini 200px bolup ýerleşdiriň.

Ýaňy elementleri üç sany sütunda, her biriniň ini 150px bolup ýerleşdiriň.

Ýaňy elementleri üç sany sütunda ýerleşdiriň: birinjiniň ini 100px, ikinjiniň ini 150px, üçünjiniň ini bolsa 200px.