Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix #16838 #24067

Merged
merged 1 commit into from
Oct 16, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 12 additions & 14 deletions files/fr/glossary/gutters/index.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
---
title: Gouttières
slug: Glossary/Gutters
l10n:
sourceCommit: 8d83c05362120cbba32c165a6b1f76e73ccc9674
---

{{GlossarySidebar}}

**Les gouttières** (ou _ruelles_) sont l'espace entre les pistes de contenu. Elles peuvent être créées avec [les grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout) en utilisant les propriétés [`column-gap`](/fr/docs/Web/CSS/column-gap), [`row-gap`](/fr/docs/Web/CSS/row-gap) ou [`gap`](/fr/docs/Web/CSS/gap).
**Les gouttières** sont l'espace entre [les pistes de contenu](/fr/docs/Glossary/Grid_Tracks). Elles peuvent être créées avec [les grilles CSS](/fr/docs/Web/CSS/CSS_grid_layout) en utilisant les propriétés [`column-gap`](/fr/docs/Web/CSS/column-gap), [`row-gap`](/fr/docs/Web/CSS/row-gap) ou [`gap`](/fr/docs/Web/CSS/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.
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 entre les pistes de lignes.

```css hidden
* {
Expand Down Expand Up @@ -53,19 +55,15 @@ Dans l'exemple ci-dessous, nous avons une grille de 3 colonnes et 2 rangées, av

{{EmbedLiveSample('', '300', '280')}}

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.
En ce qui concerne la taille de la grille, les espaces agissent comme s'ils étaient une piste de grille normale, mais rien ne peut y être placé. L'espace agit comme si la ligne de la grille à cet endroit avait gagné en taille, de sorte que tout élément de la grille placé après cette ligne commence à la fin de l'espace.

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](/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout) 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.
Les propriétés `row-gap` et `column-gap` ne sont pas les seules à pouvoir entraîner un espacement des pistes. Les marges, le remplissage (<i lang="en">padding</i>) ou l'utilisation des propriétés de distribution d'espace pour [l'alignement des boîtes](/fr/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) peuvent tous contribuer à l'écart visible. Par conséquent, les propriétés `row-gap` et `column-gap` ne doivent pas être considérées comme égales à la taille de la gouttière.

## Voir aussi

### Références de la propriété

- [`column-gap`](/fr/docs/Web/CSS/column-gap)
- [`row-gap`](/fr/docs/Web/CSS/row-gap)
- [`gap`](/fr/docs/Web/CSS/gap)

### En lire plus

- Guide des grilles CSS&nbsp;: _[Les concepts de base des grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)_
- [Définition des gouttières (<i lang="en">gutters</i>) dans la spécification des grilles CSS (en anglais)](https://drafts.csswg.org/css-grid/#gutters)
- [Les grilles CSS&nbsp;: concept de base](/fr/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)
- Les pages de la référence CSS pour les propriétés associées
- [`column-gap`](/fr/docs/Web/CSS/column-gap)
- [`row-gap`](/fr/docs/Web/CSS/row-gap)
- [`gap`](/fr/docs/Web/CSS/gap)
- [Définition des gouttières dans la spécification des grilles CSS (en anglais)](https://drafts.csswg.org/css-grid/#gutters)