Avstand mellom kolonner og rader i CSS-grid

Med gap-egenskapen kan du samtidig angi avstand mellom kolonner og rader i griddet.

Du kan enten sende én verdi, eller to verdier separert med mellomrom. Hvis én verdi er sendt, angir den samtidig avstand mellom kolonner og rader. Hvis to verdier er sendt, angir den første avstanden mellom radene, og den andre - mellom kolonnene.

Eksempel

La oss angi samme avstand mellom kolonner og 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;
}

Eksempel

La oss angi forskjellig avstand mellom kolonner og 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;
}

Praktiske oppgaver

Opprett et grid der avstanden mellom kolonner og rader er 10px.

Opprett et grid der avstanden mellom kolonner og rader er 10px og 5% henholdsvis.