title: How to place divs in CSS grid using grid-template-areas?
body: <p>I am trying to put similar groups of elements in a grid:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#grid {
      position: absolute;
      left: 135px;
      top: 158px;
      width: 1080px;
      height: 1035px;
      display: grid;
      grid-template-rows: 99px 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
      grid-row-gap: 60px;
      grid-column-gap: 60px;
      grid-template-areas: "headings headings headings"
                           "content-a content-b content-c"
                           "content-d content-e content-f";
  }
  
  #welcome-heading {
      padding-bottom: 10px;
  }
  
  #introduction-heading {
      padding-bottom: 10px;
  }
  
  #headings-section {
      grid-area: headings;
  }
  
  #content-a {
      grid-area: content-a;
  }
  
  #content-b {
      grid-area: content-b;
  }
  
  #content-c {
      grid-area: content-c;
  }
  
  #content-d {
      grid-area: content-d;
  }
  
  #content-e {
      grid-area: content-e;
  }
  
  #content-f {
      grid-area: content-f;
  }
  
  #content {
      text-align: center;
  }
  
  #content img {
      margin-bottom: 33px;
      width: 320px;
      height: 240px;
  }
  
  #content h4 {
      margin-bottom: 20px;
  }
  
  .content-title-anchor {
      font-size: 18px;
      line-height: 18px;
      color: #333333;
  }
  
  .button {
      font-size: 16px;
      line-height: 27px;
      color: #FFFFFF;
      background-color: #FF5A43;
      padding: 10px 25px;
      border-radius: 4px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="grid"&gt;
      &lt;section id="headings-section"&gt;
          &lt;h1 id="welcome-heading"&gt;Welcome to Icon Utopia!&lt;/h1&gt;
          &lt;h3 id="introduction-heading"&gt;Everything about &lt;a href="free-icon-design-guide.html"&gt;iconography&lt;/a&gt; and &lt;a href="build-your-dribbble-audience.html"&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;section id="content"&gt;
          &lt;div id="content-a"&gt;
              &lt;a href="build-your-dribbble-audience.html"&gt;&lt;img src="index/landing-page.jpg" alt="Guide to: Building your dribbble following."&gt;&lt;/a&gt;
              &lt;a class="content-title-anchor" href="build-your-dribbble-audience.html"&gt;Build Your Dribbble Audience&lt;/a&gt;
              &lt;h4&gt;A Comprehensive Guide to Building your Dribbble following.&lt;/h4&gt;
              &lt;a class="button" href="build-your-dribbble-audience.html"&gt;Get a FREE Chapter!&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="content-b"&gt;
              &lt;a href="free-icon-design-guide.html"&gt;&lt;img src="index/icon-design-guide2-1.jpg" alt="LEARN ICON DESIGN"&gt;&lt;/a&gt;
              &lt;a class="content-title-anchor" href="free-icon-design-guide.html"&gt;Free Icon Design Guide&lt;/a&gt;
              &lt;h4&gt;Everything you need to know about icon design to get started.&lt;/h4&gt;
              &lt;a class="button" href="free-icon-design-guide.html"&gt;Learn Icon Design&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="content-c"&gt;
              &lt;a href="crafting-pixel-perfect-icons-the-right-way.html"&gt;&lt;img src="index/pixel-perfect-icons.jpg" alt="CRAFTING PIXEL PERFECT ICONS"&gt;&lt;/a&gt;
              &lt;a class="content-title-anchor" href="crafting-pixel-perfect-icons-the-right-way.html"&gt;Pixel Perfect Course&lt;/a&gt;
              &lt;h4&gt;Crafting Pixel Perfect Icons The Right Way - learn to create sharp-looking icons!&lt;/h4&gt;
              &lt;a class="button" href="crafting-pixel-perfect-icons-the-right-way.html"&gt;Check out the Course&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="content-d"&gt;
              &lt;a href="https://gumroad.com/l/ojcK"&gt;&lt;img src="index/space-noise-brushes.jpg" alt="SPACE NOISE: PROCREATE BRUSH SET"&gt;&lt;/a&gt;
              &lt;a class="content-title-anchor" href="https://gumroad.com/l/ojcK"&gt;Space Noise Brushes&lt;/a&gt;
              &lt;h4&gt;Procreate brushes that give your drawings fantastic textures&lt;/h4&gt;
              &lt;a class="button" href="https://gumroad.com/l/ojcK"&gt;Get Noise Brushes&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="content-e"&gt;
              &lt;a href="https://iconutopia.com/free-icons/"&gt;&lt;img src="index/free-icons.jpg" alt="FREE ICONS"&gt;&lt;/a&gt;
              &lt;a class="content-title-anchor" href="https://iconutopia.com/free-icons/"&gt;Free Icons&lt;/a&gt;
              &lt;h4&gt;Best FREE vector icons and icon sets for personal and commercial use&lt;/h4&gt;
              &lt;a class="button" href="https://iconutopia.com/free-icons/"&gt;Get Free Icons&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="content-f"&gt;
              &lt;a href="blog.html"&gt;&lt;img src="index/icon-utopia-blog-2.jpg" alt="MY BLOG: ICON UTOPIA"&gt;&lt;/a&gt;
              &lt;a class="content-title-anchor" href="blog.html"&gt;Icon Utopia Blog&lt;/a&gt;
              &lt;h4&gt;Blog about making a steady income and building a career as an icon designer.&lt;/h4&gt;
              &lt;a class="button" href="blog.html"&gt;Check out the Blog&lt;/a&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>But this is the result that I get:</p>
  <p><a href="https://i.stack.imgur.com/9yEy3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9yEy3.png" alt="enter image description here" /></a></p>
  <p>As you can see, the layout is correct for the first row. But the bottom 2 rows should each have 3 columns. Instead, I get 6 rows with one column. I've read <a href="https://stackoverflow.com/questions/46800525/grid-properties-not-working-on-elements-inside-grid-container">this</a> and I think it might have something to do with me nesting the element of each area within a div, but I'm not sure. I can't figure out what I'm supposed to do to get each of the div placed in one 'area' in a grid whose bottom 2 rows have 3 columns each.</p>