Propriété CSS grid-gap
La propriété grid-gap permet de spécifier la taille de l'espace entre les lignes et entre les colonnes. Cette propriété est un raccourci pour les propriétés suivantes :
- grid-row-gap, qui spécifie la taille de l'espace entre les lignes.
- grid-column-gap, qui spécifie la taille de l'espace entre les colonnes.
La propriété standard gap a remplacé grid-gap. La propriété grid-gap est désormais considérée comme obsolète et est principalement nécessaire pour les anciens navigateurs qui ont implémenté la version préfixée avant l'établissement de la propriété standard gap. Pour les nouveaux projets, il est recommandé d'utiliser la propriété standard gap.
| Valeur initiale | 0 |
|---|---|
| S'applique à | Conteneurs de grille. |
| Héritée | Non. |
| Animable | Oui. grid-gap est animable. |
| Version | CSS Grid Layout Module Level 1 |
| Syntaxe DOM | object.style.gridGap = "30px 70px"; |
Syntaxe
Propriété CSS grid-gap
grid-gap: grid-row-gap | grid-column-gap | initial | inherit;Exemple de la propriété grid-gap :
Exemple d'un conteneur de grille avec la propriété grid-gap
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 60px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #666;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-gap property example</h2>
<div class="grid-container">
<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>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>Résultat
Exemple de la propriété grid-gap spécifiée en pourcentages :
Exemple d'un conteneur de grille où l'espacement de la grille est défini par des pourcentages
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 20%;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #666;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-gap property example</h2>
<div class="grid-container">
<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>
</body>
</html>Exemple de la propriété grid-gap avec deux valeurs :
Exemple de la propriété CSS grid-gap
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 20px 80px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #666;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-gap property example</h2>
<div class="grid-container">
<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>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>Valeurs
| Valeur | Description | Jouer |
|---|---|---|
| grid-row-gap | Spécifie la taille de l'espace entre les lignes dans une mise en page de grille. La valeur par défaut est 0. Lors de l'utilisation de la syntaxe à deux valeurs, cela correspond à la première valeur. | |
| grid-column-gap | Spécifie la taille de l'espace entre les colonnes dans une mise en page de grille. La valeur par défaut est 0. Lors de l'utilisation de la syntaxe à deux valeurs, cela correspond à la deuxième valeur. | Jouer » |
| initial | Définit la valeur par défaut de la propriété. | |
| inherit | Hérite la propriété de son élément parent. |
Pratique
À quoi sert la propriété 'grid-gap' en CSS ?