Avstånd mellan kolumner och rader i CSS-rutnät

Med egenskapen gap kan du samtidigt ställa in avståndet mellan kolumner och rader i rutnätet.

Antingen ett värde kan skickas, eller två separerade med mellanslag. Om ett värde skickas, sätter det samtidigt avståndet mellan kolumner och rader. Om två värden skickas, sätter det första avståndet mellan rader, och det andra - mellan kolumner.

Exempel

Låt oss sätta samma avstånd mellan kolumner och rader:

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

Exempel

Låt oss sätta olika avstånd mellan kolumner och rader:

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

Praktiska uppgifter

Skapa ett rutnät där avståndet mellan kolumner och rader är 10px.

Skapa ett rutnät där avståndet mellan kolumner och rader är 10px och 5% respektive.