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.
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1.2fr);
grid-auto-rows: 45%;
column-gap: 20px;
row-gap: 20px;
}
<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.