Revision 1134365 of grid-row-gap

<div>{{CSSRef}}{{SeeCompatTable}}</div>

<p>La propriété <strong><code>grid-row-gap</code></strong> définit l'espacement entre les lignes d'une grille.</p>

<p>En termes de dimensionnement, cet espace est traité comme une piste supplémentaire de la longueur indiquée. Les valeurs négatives ne sont pas autorisées.</p>

<p>{{cssinfo}}</p>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="brush: css">
/* Valeurs de longueur */
/* Type &lt;length&gt;       */
grid-row-gap: 20px;
grid-row-gap: 1em;
grid-row-gap: 3vmin;
grid-row-gap: 0.5cm;

/* Valeurs globales */
grid-row-gap: inherit;
grid-row-gap: initial;
grid-row-gap: unset;
</pre>

<h3 id="Valeurs">Valeurs</h3>

<dl>
 <dt><code>&lt;length-percentage&gt;</code></dt>
 <dd>La largeur de la « gouttière » placée entre les lignes de la grille. Les valeurs exprimées en pourcentages sont relatives aux dimensions de l'élément.</dd>
</dl>

<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>

<pre class="syntaxbox">
{{csssyntax}}</pre>

<h2 id="Exemples">Exemples</h2>

<h3 id="CSS">CSS</h3>

<pre class="brush: css; highlight[6]">
#grid {
  display: grid;
  height: 200px;
  grid-template-columns: 200px;
  grid-template-rows: repeat(3, 1fr);
  grid-row-gap: 20px;
}

#grid &gt; div {
  background-color: lime;
}</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">
&lt;div id="grid"&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;</pre>

<h3 id="Résultat">Résultat</h3>

<p>{{EmbedLiveSample("Exemples", "200px", "200px")}}</p>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS3 Grid", "#propdef-grid-row-gap", "grid-row-gap")}}</td>
   <td>{{Spec2("CSS3 Grid")}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Edge</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Support simple</td>
   <td>29.0<sup>[1]</sup></td>
   <td>{{CompatGeckoDesktop("40.0")}}<sup>[2]</sup></td>
   <td>{{CompatNo}}<sup>[3]</sup></td>
   <td>{{CompatNo}}<sup>[3]</sup></td>
   <td>28.0<sup>[1]</sup></td>
   <td>{{CompatNightly("Safari")}}{{property_prefix("-webkit")}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Support simple</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}<sup>[3]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Cette fonctionnalité est implémentée via le marqueur <em>fonctionnalités expérimentales de la Web&nbsp;Platform</em> sous <code>chrome://flags</code>.</p>

<p>[2] Cette fonctionnalité est implémentée via la préférence <code>layout.css.grid.enabled</code> qui vaut <code>false</code> par défaut.</p>

<p>[3] Internet Explorer implémente <a href="https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-columns-and-rows-properties">une ancienne version de la spécification</a> qui ne définit pas cette propriété.</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{cssxref("grid-column-gap")}}</li>
 <li>{{cssxref("grid-gap")}}</li>
</ul>