Afstand tussen kolomme en rye in CSS roosters

Met die gap eienskap kan jy gelyktydig die afstand tussen 'n rooster se kolomme en rye spesifiseer.

Jy kan óf een waarde oorhandig, óf twee waardes met 'n spasie ertussen. As een waarde oorhandig word, spesifiseer dit gelyktydig die afstand tussen kolomme en rye. As twee waardes oorhandig word, spesifiseer die eerste een die afstand tussen die rye, en die tweede een - tussen die kolomme.

Voorbeeld

Kom ons spesifiseer dieselfde afstand tussen kolomme en rye:

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

Voorbeeld

Kom ons spesifiseer verskillende afstande tussen kolomme en rye:

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

Praktiese take

Skep 'n tabel waarin die afstand tussen kolomme en rye 10px sal wees.

Skep 'n tabel waarin die afstand tussen kolomme en rye onderskeidelik 10px en 5% sal wees.