Umbali kati ya Safu Wima na Safu Mlalo katika Gridi za CSS

Kwa kutumia sifa gap unaweza kuweka umbali kati ya safu wima na safu mlalo za gridi.

Unaweza kubadilisha thamani moja, au mbili zikitenganishwa na nafasi. Ikiwa thamani moja imebadilishwa, inabainisha umbali kati ya safu wima na safu mlalo kwa wakati mmoja. Ikiwa thamani mbili zimebadilishwa, basi ya kwanza inabainisha umbali kati ya safu mlalo, na ya pili - kati ya safu wima.

Mfano

Weka umbali sawa kati ya safu wima na safu mlalo:

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

Mfano

Weka umbali tofauti kati ya safu wima na safu mlalo:

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

Kazi za Vitendo

Unda jedwali, ambapo umbali kati ya safu wima na safu mlalo utakuwa 10px.

Unda jedwali, ambapo umbali kati ya safu wima na safu mlalo utakuwa 10px na 5% mtawalia.