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

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 iconography and building your career as a designer.</h3>
<p>👇Wondering where to start?👇</p>
</section>
<section id="content">
<div id="content-a">
<img src="index/landing-page.jpg" alt="Guide to: Building your dribbble following.">
<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">
<img src="index/icon-design-guide2-1.jpg" alt="LEARN ICON DESIGN">
<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">
<img src="index/pixel-perfect-icons.jpg" alt="CRAFTING PIXEL PERFECT ICONS">
<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">
<img src="index/space-noise-brushes.jpg" alt="SPACE NOISE: PROCREATE BRUSH SET">
<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">
<img src="index/free-icons.jpg" alt="FREE ICONS">
<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">
<img src="index/icon-utopia-blog-2.jpg" alt="MY BLOG: ICON UTOPIA">
<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.

Answer 1

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 iconography and building your career as a designer.</h3>
<p>👇Wondering where to start?👇</p>
</section>
<section id="content">
<div id="content-a">
<img src="index/landing-page.jpg" alt="Guide to: Building your dribbble following.">
<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">
<img src="index/icon-design-guide2-1.jpg" alt="LEARN ICON DESIGN">
<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">
<img src="index/pixel-perfect-icons.jpg" alt="CRAFTING PIXEL PERFECT ICONS">
<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">
<img src="index/space-noise-brushes.jpg" alt="SPACE NOISE: PROCREATE BRUSH SET">
<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">
<img src="index/free-icons.jpg" alt="FREE ICONS">
<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">
<img src="index/icon-utopia-blog-2.jpg" alt="MY BLOG: ICON UTOPIA">
<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 iconography and building your career as a designer.</h3>
<p>👇Wondering where to start?👇</p>
</section>
<section id="content">
<div id="content-a">
<img src="index/landing-page.jpg" alt="Guide to: Building your dribbble following.">
<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">
<img src="index/icon-design-guide2-1.jpg" alt="LEARN ICON DESIGN">
<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">
<img src="index/pixel-perfect-icons.jpg" alt="CRAFTING PIXEL PERFECT ICONS">
<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">
<img src="index/space-noise-brushes.jpg" alt="SPACE NOISE: PROCREATE BRUSH SET">
<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">
<img src="index/free-icons.jpg" alt="FREE ICONS">
<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">
<img src="index/icon-utopia-blog-2.jpg" alt="MY BLOG: ICON UTOPIA">
<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>