Mise en page

Gouttières

Les gouttières sont les espaces entre les colonnes d’une ligne. Elles se règlent séparément à l’horizontale et à la verticale, et peuvent changer selon l’écran.

Par défaut, la gouttière horizontale mesure 1.5rem : chaque colonne reçoit la moitié de cette valeur de chaque côté, et la .row compense par des marges négatives. La gouttière verticale est nulle ; il faut donc l’ajouter quand les colonnes passent à la ligne.

Les classes g-* modifient deux variables CSS portées par la ligne : --bs-gutter-x et --bs-gutter-y.

Échelle des gouttières

Chaque classe existe aussi avec un palier : .g-md-3, .gx-lg-5, .gy-sm-2…

Échelle des gouttières
Valeur	Taille	En pixels	Horizontal	Vertical	Les deux
0	0	0	`.gx-0`	`.gy-0`	`.g-0`
1	0,25 rem	4 px	`.gx-1`	`.gy-1`	`.g-1`
2	0,5 rem	8 px	`.gx-2`	`.gy-2`	`.g-2`
3	1 rem	16 px	`.gx-3`	`.gy-3`	`.g-3`
4	1,5 rem	24 px	`.gx-4`	`.gy-4`	`.g-4`
5	3 rem	48 px	`.gx-5`	`.gy-5`	`.g-5`

Gouttières horizontales#

.gx-* ne change que l’espace entre les colonnes d’une même ligne.

gx-5

<div class="container">
  <div class="row gx-5">
    <div class="col"><div class="bg-body-secondary border p-3">gx-5</div></div>
    <div class="col"><div class="bg-body-secondary border p-3">gx-5</div></div>
  </div>
</div>

Gouttières verticales#

.gy-* ajoute de l’espace entre les lignes de colonnes. Sans elle, des colonnes qui passent à la ligne se touchent.

<div class="container">
  <div class="row gy-3">
    <div class="col-6"><div class="bg-body-secondary border p-3">1</div></div>
    <div class="col-6"><div class="bg-body-secondary border p-3">2</div></div>
    <div class="col-6"><div class="bg-body-secondary border p-3">3</div></div>
    <div class="col-6"><div class="bg-body-secondary border p-3">4</div></div>
  </div>
</div>

Gouttières dans les deux sens#

.g-* règle les deux directions d’un coup. Utilisez-la pour les grilles de cartes ou de produits.

<div class="container">
  <div class="row g-3">
    <div class="col-6"><div class="bg-body-secondary border p-3">1</div></div>
    <div class="col-6"><div class="bg-body-secondary border p-3">2</div></div>
    <div class="col-6"><div class="bg-body-secondary border p-3">3</div></div>
    <div class="col-6"><div class="bg-body-secondary border p-3">4</div></div>
  </div>
</div>

Gouttière qui varie avec l'écran#

Une gouttière étroite sur téléphone et plus large sur grand écran : ici g-2 puis g-md-4.

<div class="container">
  <div class="row g-2 g-md-4">
    <div class="col-6"><div class="bg-body-secondary border p-3">1</div></div>
    <div class="col-6"><div class="bg-body-secondary border p-3">2</div></div>
    <div class="col-6"><div class="bg-body-secondary border p-3">3</div></div>
    <div class="col-6"><div class="bg-body-secondary border p-3">4</div></div>
  </div>
</div>

Supprimer les gouttières#

.g-0 retire à la fois les marges négatives de la ligne et les marges intérieures des colonnes. Les colonnes se touchent : utile pour des visuels accolés.

g-0

<div class="container">
  <div class="row g-0">
    <div class="col-6"><div class="bg-body-secondary border p-3">g-0</div></div>
    <div class="col-6"><div class="bg-body-secondary border p-3">g-0</div></div>
  </div>
</div>

Variables Sass et CSS

Variables Sass et CSS
Nom	Valeur par défaut	Rôle
`$grid-gutter-width`	`1.5rem`	Gouttière horizontale par défaut des lignes et des conteneurs.
`$gutters`	identique à l’échelle d’espacement (`$spacers`)	Liste des valeurs 0 à 5 générées pour les classes `g-`, `gx-` et `gy-*`.
`--bs-gutter-x`	`1.5rem`	Gouttière horizontale d’une ligne ou d’un conteneur.
`--bs-gutter-y`	`0`	Gouttière verticale d’une ligne.

Bonnes pratiques

À faire

Posez toujours une gouttière verticale (g-* ou gy-*) quand vos colonnes peuvent passer à la ligne.
Gardez la même gouttière pour toutes les grilles d’une même page, pour un rythme régulier.

À éviter

N’utilisez pas des marges (mb-3) sur chaque colonne pour simuler une gouttière verticale : gy-3 est plus fiable.
Ne mettez pas une .row sans conteneur ni marge intérieure dans une page : ses marges négatives peuvent créer un défilement horizontal.

Accessibilité

Des gouttières trop étroites rendent les cibles tactiles voisines difficiles à toucher : gardez au moins 8 px entre deux boutons ou liens.