CSS gridlerinde sütün we hatarlaryň aralygy

gap aýratynlygy bilen gridiň sütün we hatarlarynyň arasyndaky aralygy bir wagtda belläp bolýar.

Ýa-da bir bahany, ýa-da iki bahany boşluk arkaly geçirip bolýar. Eger bir baha geçirilse, ol bir wagtda sütün we hatarlaryň arasyndaky aralygy bellaýar. Eger iki baha geçirilse, onda birinji hatarlaryň arasyndaky aralygy bellaýar, ikkinjisi bolsa sütünleriň arasyndaky aralygy bellaýar.

Mysal

Sütün we hatarlaryň arasynda deň aralyk belläliň:

<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;
	gap: 10px;
	grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
	padding: 10px;
	border: 2px solid #696989;
	width: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Mysal

Sütün we hatarlaryň arasynda dürli aralyklar belläliň:

<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;
	gap: 20px 10px;
	grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
	padding: 10px;
	border: 2px solid #696989;
	width: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Amaly wezipeler

Sütün we hatarlaryň arasyndaky aralygy 10px bolan tablisa dörediň.

Sütün we hatarlaryň arasyndaky aralygy 10px we 5% bolan tablisa dörediň.