Usage of CSS grid-row-gap property

---

<p>Set gap between Grid rows with CSS. You can try to run the following code to implement the grid-row-gap property.</p><h4>Example</h4><p><a class="demo" href="http://tpcg.io/F9KnzU" rel="nofollow noopener noreferrer" target="_blank">Live Demo</a></p><pre class="prettyprint notranslate">&lt;!DOCTYPE html&gt; &lt;html&gt; &nbsp; &nbsp;&lt;head&gt; &nbsp; &nbsp; &nbsp; &lt;style&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;.container { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: grid; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: green; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; grid-template-columns: auto auto; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 20px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; grid-column-gap: 20px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; grid-row-gap: 20px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;.ele { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: orange; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 2px solid gray; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 35px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 30px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &lt;/style&gt; &nbsp; &nbsp;&lt;/head&gt; &nbsp; &nbsp;&lt;body&gt; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Game Board&lt;/h1&gt; &nbsp; &nbsp; &nbsp; &lt;div class = &quot;container&quot;&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class = &quot;ele&quot;&gt;1&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class = &quot;ele&quot;&gt;2&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class = &quot;ele&quot;&gt;3&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class = &quot;ele&quot;&gt;4&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class = &quot;ele&quot;&gt;5&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class = &quot;ele&quot;&gt;6&lt;/div&gt; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp;&lt;/body&gt; &lt;/html&gt;</pre>

• Related Questions & Answers
• Usage of CSS grid-gap property
• Usage of CSS grid-column-gap property
• Usage of CSS grid-row-end property
• Usage of CSS grid-row-start property
• Usage of CSS grid property
• CSS grid-row Property
• Usage of CSS grid-column-start property
• Usage of CSS grid-auto-rows property
• Usage of CSS grid-column-end property
• Usage of CSS grid-auto-columns property
• Usage of CSS grid-auto-flow property
• Adjust gap size for CSS Grid
• Animate CSS column-gap property
• Set the size of the gap between CSS grid columns
• Usage of CSS visibility property