Vahede seadmine CSS võrede veergude ja ridade vahel

Omadusega gap saab samaaegselt määrata võre veergude ja ridade vahelise kauguse.

Saab edastada kas ühe väärtuse või kaks tühikuga eraldatud väärtust. Kui edastatakse üks väärtus, määrab see samaaegselt nii veergude kui ridade vahelise kauguse. Kui aga edastatakse kaks väärtust, siis esimene määrab ridade vahelise kauguse ja teine - veergude vahelise kauguse.

Näide

Määrame veergude ja ridade vahele sama kauguse:

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

Näide

Määrame veergude ja ridade vahele erinevad kaugused:

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

Praktilised ülesanded

Loo tabel, kus veergude ja ridade vaheline kaugus oleks 10px.

Loo tabel, kus veergude ja ridade vaheline kaugus oleks 10px ja 5% vastavalt.