From 7ff4b68d8922499a546c3f2303e4d87755528f9d Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Mon, 14 Oct 2024 20:59:15 +0200 Subject: [PATCH] Fix #16838 with improved wording + update vs en-US --- files/fr/glossary/gutters/index.md | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/files/fr/glossary/gutters/index.md b/files/fr/glossary/gutters/index.md index 677a495ec039e9..3033c6417adc55 100644 --- a/files/fr/glossary/gutters/index.md +++ b/files/fr/glossary/gutters/index.md @@ -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 * { @@ -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 (padding) 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 : _[Les concepts de base des grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)_ -- [Définition des gouttières (gutters) dans la spécification des grilles CSS (en anglais)](https://drafts.csswg.org/css-grid/#gutters) +- [Les grilles CSS : 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)