Gouttières

Les gouttières (ou ruelles) sont l'espace entre les pistes de contenu. Elles peuvent être créées avec les grilles CSS en utilisant les propriétés column-gap, row-gap ou gap.

Exemple

Dans l'exemple ci-dessous, nous avons une grille de 3 colonnes et 2 rangées, avec 20 pixels d'écart entre les pistes de colonnes et 20px entre les pistes de lignes.

css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1.2fr);
  grid-auto-rows: 45%;
  column-gap: 20px;
  row-gap: 20px;
}
html
<div class="wrapper">
  <div>Un</div>
  <div>Deux</div>
  <div>Trois</div>
  <div>Quatre</div>
  <div>Cinq</div>
</div>

En termes de dimensionnement de la grille, l'écart agit comme une grille normale, mais rien ne peut y être placé. L'écart agit comme si la ligne de grille à cet endroit avait gagné une taille supplémentaire, de sorte que tout élément de grille placé après cette ligne commence à la fin de l'écart.

Les propriétés de l'écart de grille (par exemple, row-gap et column-gap) ne sont pas la seule chose qui peut provoquer l'espacement des pistes. Les marges, le remplissage ou l'utilisation des propriétés de distribution d'espace pour l'alignement des boîtes peuvent tous contribuer à l'écart visible — donc, les propriétés de l'écart de grille (row-gap et column-gap) ne doivent pas être considérées comme égales à la taille de la gouttière, sauf si vous savez que votre conception n'a pas introduit d'espace supplémentaire avec l'une de ces méthodes.

Voir aussi

Références de la propriété

En lire plus