Espacement entre les colonnes et les rangées dans les grilles CSS

Avec la propriété gap vous pouvez définir simultanément l'espacement entre les colonnes et les rangées de la grille.

Vous pouvez spécifier soit une seule valeur, soit deux valeurs séparées par un espace. Si une seule valeur est fournie, elle définit à la fois l'espacement entre les colonnes et les rangées. Si deux valeurs sont fournies, alors la première définit l'espacement entre les rangées, et la seconde - entre les colonnes.

Exemple

Définissons le même espacement entre les colonnes et les rangées :

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

Exemple

Définissons des espacements différents entre les colonnes et les rangées :

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

Tâches pratiques

Créez une grille dans laquelle l'espacement entre les colonnes et les rangées sera de 10px.

Créez une grille dans laquelle l'espacement entre les colonnes et les rangées sera de 10px et 5% respectivement.