Razmak između kolona i redova u CSS gridovima

Pomoću svojstva gap moguće je istovremeno postaviti razmak između kolona i redova grida.

Može se proslediti jedna vrednost ili dve odvojene razmakom. Ako je prosleđena jedna vrednost, ona postavlja istovremeno razmak između kolona i redova. Ako su prosleđene dve vrednosti, onda prva određuje razmak između redova, a druga - između kolona.

Primer

Postavimo isti razmak između kolona i redova:

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

Primer

Postavimo različite razmake između kolona i redova:

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

Praktični zadaci

Kreirajte tabelu u kojoj će razmak između kolona i redova biti 10px.

Kreirajte tabelu u kojoj će razmak između kolona i redova biti 10px i 5% redom.