Afstand tussen kolommen en rijen in CSS grids

Met de eigenschap gap kun je tegelijkertijd de afstand tussen de kolommen en rijen van het grid instellen.

Je kunt één waarde doorgeven, of twee gescheiden door een spatie. Als er één waarde is doorgegeven, stelt deze tegelijkertijd de afstand tussen kolommen en rijen in. Als er twee waarden zijn doorgegeven, dan stelt de eerste de afstand tussen rijen in, en de tweede - tussen kolommen.

Voorbeeld

Laten we dezelfde afstand tussen kolommen en rijen instellen:

<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

Laten we verschillende afstanden tussen kolommen en rijen instellen:

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

Praktische taken

Maak een tabel waarin de afstand tussen kolommen en rijen 10px bedraagt.

Maak een tabel waarin de afstand tussen kolommen en rijen 10px en 5% respectievelijk bedraagt.