Odstępy między kolumnami i wierszami w siatkach CSS

Za pomocą właściwości gap można jednocześnie ustawić odstępy między kolumnami i wierszami siatki.

Można przekazać jedną wartość lub dwie wartości oddzielone spacją. Jeśli przekazana jest jedna wartość, ustawia ona jednocześnie odstęp między kolumnami i wierszami. Jeśli przekazane są dwie wartości, to pierwsza ustawia odstęp między wierszami, a druga - między kolumnami.

Przykład

Ustawmy ten sam odstęp między kolumnami i wierszami:

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

Przykład

Ustawmy różne odstępy między kolumnami i wierszami:

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

Zadania praktyczne

Utwórz siatkę, w której odstęp między kolumnami i wierszami wynosi 10px.

Utwórz siatkę, w której odstęp między kolumnami i wierszami wynosi 10px i 5% odpowiednio.