diff options
Diffstat (limited to 'files/fr/glossary/gutters/index.html')
| -rw-r--r-- | files/fr/glossary/gutters/index.html | 74 |
1 files changed, 74 insertions, 0 deletions
diff --git a/files/fr/glossary/gutters/index.html b/files/fr/glossary/gutters/index.html new file mode 100644 index 0000000000..608e93c8ae --- /dev/null +++ b/files/fr/glossary/gutters/index.html @@ -0,0 +1,74 @@ +--- +title: Gouttière +slug: Glossaire/Gutters +tags: + - CSS + - Glossaire + - Grilles +translation_of: Glossary/Gutters +--- +<p><strong>Les gouttières (</strong>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" )}}.</p> + +<p>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 <code>20 px</code> entre les pistes de lignes.</p> + +<div id="example_1"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #fff8f8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3,1.2fr); + grid-auto-rows: 45%; + grid-column-gap: 20px; + grid-row-gap: 20px; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('example_1', '300', '280') }}</p> +</div> + +<p>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.</p> + +<p>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 <a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_bo%C3%AEtes_avec_les_grilles_CSS">l'alignement des boîtes</a> 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.</p> + +<h2 id="En_apprendre_plus">En apprendre plus</h2> + +<h3 id="Références_de_la_propriété">Références de la propriété</h3> + +<ul> + <li>{{cssxref("grid-column-gap")}}</li> + <li>{{cssxref("grid-row-gap")}}</li> + <li>{{cssxref("grid-gap")}}</li> +</ul> + +<h3 id="En_lire_plus">En lire plus</h3> + +<ul> + <li>Guide des grilles CSS : <em><a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base">Les concepts de base des grilles CSS</a></em></li> + <li><a href="https://drafts.csswg.org/css-grid/#gutters">Définition des gouttières <em>(gutters)</em> dans la spécification des grilles CSS</a> (en)</li> +</ul> |