Растојање између колона и редова у CSS grid-у

Помоћу својства gap можете истовремено задати растојање између колона и редова грида.

Може се проследити или једна вредност, или две раздвојене размаком. Ако је прослеђена једна вредност, она задаје истовремено растојање између колона и редова. Ако су прослеђене две вредности, онда прва задаје растојање између редова, а друга - између колона.

Пример

Поставимо исто растојање између колона и редова:

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

Пример

Поставимо различита растојања између колона и редова:

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

Практични задаци

Направите табелу у којој ће растојање између колона и редова бити 10px.

Направите табелу у којој ће растојање између колона и редова бити 10px и 5% редом.