Afstand mellem kolonner og rækker i CSS grids

Med egenskaben gap kan du samtidigt angive afstanden mellem kolonner og rækker i griddet.

Du kan enten sende én værdi eller to adskilt af mellemrum. Hvis der sendes én værdi, angiver den samtidigt afstanden mellem kolonner og rækker. Hvis der sendes to værdier, angiver den første afstanden mellem rækker, og den anden - mellem kolonner.

Eksempel

Lad os angive den samme afstand mellem kolonner og rækker:

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

Eksempel

Lad os angive forskellige afstande mellem kolonner og rækker:

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

Praktiske opgaver

Opret en tabel, hvor afstanden mellem kolonner og rækker vil være 10px.

Opret en tabel, hvor afstanden mellem kolonner og rækker vil være 10px og 5% henholdsvis.