Distanța dintre coloane și rânduri în grid-urile CSS

Cu ajutorul proprietății gap se poate seta simultan distanța dintre coloanele și rândurile grid-ului.

Se poate transmite fie o singură valoare, fie două separate prin spațiu. Dacă este transmisă o singură valoare, aceasta stabilește simultan distanța dintre coloane și rânduri. Dacă sunt transmise două valori, atunci prima stabilește distanța dintre rânduri, iar a doua - dintre coloane.

Exemplu

Să stabilim aceeași distanță între coloane și rânduri:

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

Exemplu

Să stabilim distanțe diferite între coloane și rânduri:

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

Sarcini practice

Creați un grid în care distanța dintre coloane și rânduri să fie de 10px.

Creați un grid în care distanța dintre coloane și rânduri să fie de 10px și 5% respectiv.