title: Put multiple elements in single area in CSS grid
body: <p>I am using a CSS grid. To get an idea of the layout, please look at the CSS:</p>
  <pre class="lang-css prettyprint-override"><code>.grid {
      position: relative;
      left: 135px;
      top: 158px;
      width: 1080px;
      height: 1015px;
      display: grid;
      grid-template-rows: 79px 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
      grid-row-gap: 60px;
      grid-column-gap: 60px;
      grid-template-areas: &quot;headings headings headings&quot;
                           &quot;a b c&quot;
                           &quot;d e f&quot;;
  }
  
  #headings-section {
      grid-area: headings;
  }
  
  .a {
      grid-area: a;
  }
  
  .b {
      grid-area: b;
  }
  
  .c {
      grid-area: c;
  }
  
  .d {
      grid-area: d;
  }
  
  .e {
      grid-area: e;
  }
  
  .f {
      grid-area: f;
  }
  
  .temp {
      background-color: blue;
  }
  </code></pre>
  <p>Here's the html:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;grid&quot;&gt;
      &lt;section id=&quot;headings-section&quot;&gt;
          &lt;h1 id=&quot;welcome-heading&quot;&gt;Welcome to Icon Utopia!&lt;/h1&gt;
          &lt;h3 id=&quot;introduction-heading&quot;&gt;Everything about &lt;a href=&quot;free-icon-design-guide.html&quot;&gt;iconography&lt;/a&gt; and &lt;a href=&quot;build-your-dribbble-audience.html&quot;&gt;building your career&lt;/a&gt; as a designer.&lt;/h3&gt;
          &lt;p&gt;Wondering where to start?&lt;/p&gt;
      &lt;/section&gt;
      &lt;div class=&quot;temp a&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;temp b&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;temp c&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;temp d&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;temp e&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;temp f&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Here's the problem I am running into: I have set <code>grid-row-gap: 60px</code> but this is the result that I get:</p>
  <p><a href="https://i.stack.imgur.com/wItev.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wItev.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/DnBEt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DnBEt.png" alt="enter image description here" /></a></p>
  <p>The two headings and the paragraph in <code>id=&quot;headings-section&quot;</code> are where I want them to be, but the gap between the paragraph and the next grid row is 40px instead of 60px. I think that all three of the elements are not fitting into the first grid row. Later, I plan to add four elements inside each of the <code>div</code>s. I am wondering, maybe I made the wrong choice by using the grid. Is there a way to add multiple elements into the same grid area? And apparently setting the <code>grid-area</code> for the entire section doesn't do what I intend. Should I instead use another method for laying out the page?</p>