Sarakkeiden ja rivien välimatkat CSS-gridissä

gap-ominaisuudella voidaan samanaikaisesti määrittää gridin sarakkeiden ja rivien välinen etäisyys.

Voidaan antaa joko yksi arvo tai kaksi arvoa välilyönnillä erotettuna. Jos annetaan yksi arvo, se määrittää samanaikaisesti sarakkeiden ja rivien välisen etäisyyden. Jos taas annetaan kaksi arvoa, niin ensimmäinen määrittää rivien välisen etäisyyden, ja toinen - sarakkeiden välisen etäisyyden.

Esimerkki

Määritetään sama etäisyys sarakkeiden ja rivien välille:

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

Esimerkki

Määritetään eri etäisyydet sarakkeiden ja rivien välille:

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

Käytännön tehtävät

Luo taulukko, jossa sarakkeiden ja rivien välinen etäisyys on 10px.

Luo taulukko, jossa sarakkeiden ja rivien välinen etäisyys on 10px ja 5% vastaavasti.