How to place divs in CSS grid using grid-template-areas?

Question

I am trying to put similar groups of elements in a grid:

#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;
}

<div id="grid">
    <section id="headings-section">
        <h1 id="welcome-heading">Welcome to Icon Utopia!</h1>
        <h3 id="introduction-heading">Everything about <a href="free-icon-design-guide.html">iconography</a> and <a href="build-your-dribbble-audience.html">building your career</a> as a designer.</h3>
        <p>Wondering where to start?</p>
    </section>
    <section id="content">
        <div id="content-a">
            <a href="build-your-dribbble-audience.html"><img src="index/landing-page.jpg" alt="Guide to: Building your dribbble following."></a>
            <a class="content-title-anchor" href="build-your-dribbble-audience.html">Build Your Dribbble Audience</a>
            <h4>A Comprehensive Guide to Building your Dribbble following.</h4>
            <a class="button" href="build-your-dribbble-audience.html">Get a FREE Chapter!</a>
        </div>
        <div id="content-b">
            <a href="free-icon-design-guide.html"><img src="index/icon-design-guide2-1.jpg" alt="LEARN ICON DESIGN"></a>
            <a class="content-title-anchor" href="free-icon-design-guide.html">Free Icon Design Guide</a>
            <h4>Everything you need to know about icon design to get started.</h4>
            <a class="button" href="free-icon-design-guide.html">Learn Icon Design</a>
        </div>
        <div id="content-c">
            <a href="crafting-pixel-perfect-icons-the-right-way.html"><img src="index/pixel-perfect-icons.jpg" alt="CRAFTING PIXEL PERFECT ICONS"></a>
            <a class="content-title-anchor" href="crafting-pixel-perfect-icons-the-right-way.html">Pixel Perfect Course</a>
            <h4>Crafting Pixel Perfect Icons The Right Way - learn to create sharp-looking icons!</h4>
            <a class="button" href="crafting-pixel-perfect-icons-the-right-way.html">Check out the Course</a>
        </div>
        <div id="content-d">
            <a href="https://gumroad.com/l/ojcK"><img src="index/space-noise-brushes.jpg" alt="SPACE NOISE: PROCREATE BRUSH SET"></a>
            <a class="content-title-anchor" href="https://gumroad.com/l/ojcK">Space Noise Brushes</a>
            <h4>Procreate brushes that give your drawings fantastic textures</h4>
            <a class="button" href="https://gumroad.com/l/ojcK">Get Noise Brushes</a>
        </div>
        <div id="content-e">
            <a href="https://iconutopia.com/free-icons/"><img src="index/free-icons.jpg" alt="FREE ICONS"></a>
            <a class="content-title-anchor" href="https://iconutopia.com/free-icons/">Free Icons</a>
            <h4>Best FREE vector icons and icon sets for personal and commercial use</h4>
            <a class="button" href="https://iconutopia.com/free-icons/">Get Free Icons</a>
        </div>
        <div id="content-f">
            <a href="blog.html"><img src="index/icon-utopia-blog-2.jpg" alt="MY BLOG: ICON UTOPIA"></a>
            <a class="content-title-anchor" href="blog.html">Icon Utopia Blog</a>
            <h4>Blog about making a steady income and building a career as an icon designer.</h4>
            <a class="button" href="blog.html">Check out the Blog</a>
        </div>
    </section>
</div>

But this is the result that I get:

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 this 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.

Because `content-*` elements are not direct children of your grid parent. You need to make your `#content` element a grid parent or change your markup to move the `content-*` elements to become direct children of `#grid` — disinfor, Oct 07 '20 at 16:41

disinfor · Accepted Answer · 2020-10-07T16:52:04.727

Since your content-* elements are not direct children, they are not affected by the #grid parent. You can make your #content element a grid parent.

I changed the grid-template-areas for your #grid element and update the CSS to include styles for the #content element (which you may need to update for your needs)

#grid {
  position: absolute;
  left: 135px;
  top: 158px;
  width: 1080px;
  height: 1035px;
  display: grid;
  grid-template-rows: 99px 1fr;
  grid-template-columns: 1fr;
  grid-row-gap: 60px;
  grid-template-areas: "headings" "content"
}

#content {
  display: grid;
  width: 100%;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap: 60px;
  grid-column-gap: 60px;
  grid-template-areas: "content-a content-b content-c" "content-d content-e content-f";
  grid-area: content;
}

#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;
}

<div id="grid">
  <section id="headings-section">
    <h1 id="welcome-heading">Welcome to Icon Utopia!</h1>
    <h3 id="introduction-heading">Everything about <a href="free-icon-design-guide.html">iconography</a> and <a href="build-your-dribbble-audience.html">building your career</a> as a designer.</h3>
    <p>Wondering where to start?</p>
  </section>
  <section id="content">
    <div id="content-a">
      <a href="build-your-dribbble-audience.html"><img src="index/landing-page.jpg" alt="Guide to: Building your dribbble following."></a>
      <a class="content-title-anchor" href="build-your-dribbble-audience.html">Build Your Dribbble Audience</a>
      <h4>A Comprehensive Guide to Building your Dribbble following.</h4>
      <a class="button" href="build-your-dribbble-audience.html">Get a FREE Chapter!</a>
    </div>
    <div id="content-b">
      <a href="free-icon-design-guide.html"><img src="index/icon-design-guide2-1.jpg" alt="LEARN ICON DESIGN"></a>
      <a class="content-title-anchor" href="free-icon-design-guide.html">Free Icon Design Guide</a>
      <h4>Everything you need to know about icon design to get started.</h4>
      <a class="button" href="free-icon-design-guide.html">Learn Icon Design</a>
    </div>
    <div id="content-c">
      <a href="crafting-pixel-perfect-icons-the-right-way.html"><img src="index/pixel-perfect-icons.jpg" alt="CRAFTING PIXEL PERFECT ICONS"></a>
      <a class="content-title-anchor" href="crafting-pixel-perfect-icons-the-right-way.html">Pixel Perfect Course</a>
      <h4>Crafting Pixel Perfect Icons The Right Way - learn to create sharp-looking icons!</h4>
      <a class="button" href="crafting-pixel-perfect-icons-the-right-way.html">Check out the Course</a>
    </div>
    <div id="content-d">
      <a href="https://gumroad.com/l/ojcK"><img src="index/space-noise-brushes.jpg" alt="SPACE NOISE: PROCREATE BRUSH SET"></a>
      <a class="content-title-anchor" href="https://gumroad.com/l/ojcK">Space Noise Brushes</a>
      <h4>Procreate brushes that give your drawings fantastic textures</h4>
      <a class="button" href="https://gumroad.com/l/ojcK">Get Noise Brushes</a>
    </div>
    <div id="content-e">
      <a href="https://iconutopia.com/free-icons/"><img src="index/free-icons.jpg" alt="FREE ICONS"></a>
      <a class="content-title-anchor" href="https://iconutopia.com/free-icons/">Free Icons</a>
      <h4>Best FREE vector icons and icon sets for personal and commercial use</h4>
      <a class="button" href="https://iconutopia.com/free-icons/">Get Free Icons</a>
    </div>
    <div id="content-f">
      <a href="blog.html"><img src="index/icon-utopia-blog-2.jpg" alt="MY BLOG: ICON UTOPIA"></a>
      <a class="content-title-anchor" href="blog.html">Icon Utopia Blog</a>
      <h4>Blog about making a steady income and building a career as an icon designer.</h4>
      <a class="button" href="blog.html">Check out the Blog</a>
    </div>
  </section>
</div>

You can technically remove the grid display from #grid since you don't necessarily need it, since your #headings-section is full-width anyway.

#grid {
  position: absolute;
  left: 135px;
  top: 158px;
  width: 1080px;
  height: 1035px;
}

#content {
  display: grid;
  width: 100%;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap: 60px;
  grid-column-gap: 60px;
  grid-template-areas: "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;
}

<div id="grid">
  <section id="headings-section">
    <h1 id="welcome-heading">Welcome to Icon Utopia!</h1>
    <h3 id="introduction-heading">Everything about <a href="free-icon-design-guide.html">iconography</a> and <a href="build-your-dribbble-audience.html">building your career</a> as a designer.</h3>
    <p>Wondering where to start?</p>
  </section>
  <section id="content">
    <div id="content-a">
      <a href="build-your-dribbble-audience.html"><img src="index/landing-page.jpg" alt="Guide to: Building your dribbble following."></a>
      <a class="content-title-anchor" href="build-your-dribbble-audience.html">Build Your Dribbble Audience</a>
      <h4>A Comprehensive Guide to Building your Dribbble following.</h4>
      <a class="button" href="build-your-dribbble-audience.html">Get a FREE Chapter!</a>
    </div>
    <div id="content-b">
      <a href="free-icon-design-guide.html"><img src="index/icon-design-guide2-1.jpg" alt="LEARN ICON DESIGN"></a>
      <a class="content-title-anchor" href="free-icon-design-guide.html">Free Icon Design Guide</a>
      <h4>Everything you need to know about icon design to get started.</h4>
      <a class="button" href="free-icon-design-guide.html">Learn Icon Design</a>
    </div>
    <div id="content-c">
      <a href="crafting-pixel-perfect-icons-the-right-way.html"><img src="index/pixel-perfect-icons.jpg" alt="CRAFTING PIXEL PERFECT ICONS"></a>
      <a class="content-title-anchor" href="crafting-pixel-perfect-icons-the-right-way.html">Pixel Perfect Course</a>
      <h4>Crafting Pixel Perfect Icons The Right Way - learn to create sharp-looking icons!</h4>
      <a class="button" href="crafting-pixel-perfect-icons-the-right-way.html">Check out the Course</a>
    </div>
    <div id="content-d">
      <a href="https://gumroad.com/l/ojcK"><img src="index/space-noise-brushes.jpg" alt="SPACE NOISE: PROCREATE BRUSH SET"></a>
      <a class="content-title-anchor" href="https://gumroad.com/l/ojcK">Space Noise Brushes</a>
      <h4>Procreate brushes that give your drawings fantastic textures</h4>
      <a class="button" href="https://gumroad.com/l/ojcK">Get Noise Brushes</a>
    </div>
    <div id="content-e">
      <a href="https://iconutopia.com/free-icons/"><img src="index/free-icons.jpg" alt="FREE ICONS"></a>
      <a class="content-title-anchor" href="https://iconutopia.com/free-icons/">Free Icons</a>
      <h4>Best FREE vector icons and icon sets for personal and commercial use</h4>
      <a class="button" href="https://iconutopia.com/free-icons/">Get Free Icons</a>
    </div>
    <div id="content-f">
      <a href="blog.html"><img src="index/icon-utopia-blog-2.jpg" alt="MY BLOG: ICON UTOPIA"></a>
      <a class="content-title-anchor" href="blog.html">Icon Utopia Blog</a>
      <h4>Blog about making a steady income and building a career as an icon designer.</h4>
      <a class="button" href="blog.html">Check out the Blog</a>
    </div>
  </section>
</div>

Thanks. I ended removing the headings from the grid and making a grid with just 2 rows and 3 columns. Should have done this the first time — Huzaifa, Oct 07 '20 at 17:19

How to place divs in CSS grid using grid-template-areas?

1 Answers1