From 9407f528b221567b88b3ab02a8f3e7fb0139c9f1 Mon Sep 17 00:00:00 2001 From: Carolyn Wu <87150472+cw118@users.noreply.github.com> Date: Mon, 7 Feb 2022 13:29:32 -0500 Subject: Update Gouttière glossary entry (#4009) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Updates and fixes for Gouttière glossary entry * Update as per review and en-US changes --- files/fr/glossary/gutters/index.md | 46 +++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 25 deletions(-) (limited to 'files') diff --git a/files/fr/glossary/gutters/index.md b/files/fr/glossary/gutters/index.md index 96e3d1b99e..6a9d71cb19 100644 --- a/files/fr/glossary/gutters/index.md +++ b/files/fr/glossary/gutters/index.md @@ -1,19 +1,15 @@ --- -title: Gouttière +title: Gouttières slug: Glossary/Gutters -tags: - - CSS - - Glossaire - - Grilles translation_of: Glossary/Gutters original_slug: Glossaire/Gutters --- -**Les gouttières (**ou ruelles) sont l'espace entre les pistes de contenu. Elles peuvent être créées en CSS Grid Layout en utilisant les propriétés {{cssxref ("grid-column-gap")}}, {{cssxref ("grid-row-gap")}} ou {{cssxref ("grid-gap" )}}. - -Dans l'exemple ci-dessous  nous avons une grille de pistes de 3 colonnes et 2 rangées, avec 20 pixels d'écart entre les pistes de colonnes et `20 px` entre les pistes de lignes. +**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). ## 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 hidden * {box-sizing: border-box;} @@ -35,38 +31,38 @@ Dans l'exemple ci-dessous  nous avons une grille de pistes de 3 colonnes et 2 r ```css .wrapper { display: grid; - grid-template-columns: repeat(3,1.2fr); + grid-template-columns: repeat(3, 1.2fr); grid-auto-rows: 45%; - grid-column-gap: 20px; - grid-row-gap: 20px; + column-gap: 20px; + row-gap: 20px; } ``` ```html
-
One
-
Two
-
Three
-
Four
-
Five
+
Un
+
Deux
+
Trois
+
Quatre
+
Cinq
``` -{{ EmbedLiveSample('Exemple', '300', '280') }} +{{EmbedLiveSample('', '300', '280')}} -En terme de dimensionnement de la grille, l'écart agit comme une grille régulière, 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 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 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/Alignement_des_bo%C3%AEtes_avec_les_grilles_CSS) peuvent tous contribuer à l'écart visible - donc les propriétés de l'écart de grille 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 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. -## En apprendre plus +## Voir aussi ### Références de la propriété -- {{cssxref("grid-column-gap")}} -- {{cssxref("grid-row-gap")}} -- {{cssxref("grid-gap")}} +- [`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/Les_concepts_de_base)_ -- [Définition des gouttières _(gutters)_ dans la spécification des grilles CSS](https://drafts.csswg.org/css-grid/#gutters) (en) +- 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) -- cgit v1.2.3-54-g00ecf