Tips for arranging divs in CSS grid with grid-template-areas technique

I am attempting to organize 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>

However, I am encountering this issue:

https://i.sstatic.net/9yEy3.png

The layout is correct in the first row, but the bottom two rows should each contain three columns. Instead, I have six rows with only one column each. I have read this and suspect that nesting the elements of each area within a div might be causing the problem, but I'm uncertain. I need to determine how to place each div in one 'area' in a grid so that the bottom two rows have three columns each.

htmlcss

Answer â„–1

Due to the nesting of your content-* elements, they remain unaffected by the parent #grid. To address this, consider converting your #content element into a grid parent.

The modification involves updating the grid-template-areas for the #grid and adjusting the CSS for the #content element according to your requirements.

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

For optimization purposes, consider eliminating the grid display attribute from #grid, particularly if the #headings-section spans the full width on its own.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporating an HTML file into a DIV container while also displaying menu links

I am facing a major challenge with what I recognize as a relatively simple issue for experts. As someone who is still learning, I am struggling to create menu links that load an HTML file into a specific DIV. Despite my efforts, the content keeps loading i ...

javascripthtmlloadinghref

Create a new button dynamically within an HTML table row using pure JavaScript programming techniques

Currently, I am retrieving JSON data from an API and then displaying this data in an HTML table using plain JavaScript. My goal is to dynamically add a button at the end of each row for additional functionality, but so far, I have been unable to figure out ...

javascripthtmlhtml-table

The new version 5.1 of Bootstrap modal does not disable scrolling on the <body> element

I'm currently working on a project in Angular 11 using Bootstrap (v5.1.3). My main goal is to create a functionality where clicking on a card, similar to a blog post, will trigger a Bootstrap modal popup displaying the content of that specific post. B ...

htmlcssbootstrap-modalbootstrap-5bootstrap5-modal

Eliminate unnecessary transparency in React Material UI Tooltip / Popper by adjusting opacity restrictions

Looking to integrate the Tooltip component from the React Material UI Library into my project. The code snippet I am using is as follows: <WhiteOnDarkGreyTooltipWithControls disableTouchListener disableFocusListener title={ <Text selectable ...

javascriptcssreactjsmaterial-ui

Issue with PHP Form data not syncing with MySQL Database

I have been attempting to create a form and upload it into my database, but unfortunately, it is not functioning properly. Here is the HTML code I am using: <form name="Form-Request" method="post" action ="icn/form.php"> <div> ...

phphtmlmysqlinsert

<p> The box is massive, and its size is a mystery to me

Why is the box around my paragraph tag so large? I suspect this could be why I am unable to move the <p> tag down with margin-top: 50px; .train p { margin: 0; font-size: 2.5vw; } <div class="train"> <p class="train">In Training& ...

htmlcssparagraph

Center Align Images in HTML List Items

Hey there! I'm currently diving into the world of web development with responsive design, but I'm still a bit of a newbie. So please bear with me as I try to explain my issue in detail. If you need more information, just let me know! My current ...

javascriptjqueryhtmlcss

Is your URL getting cut off in jQuery?

How can I properly display a URL in an HTML table without it getting truncated? I'm attempting to show it within a table using jQuery, but it seems to be cutting off the URL. Here's a snippet of my code. Any suggestions on how to fix this? <! ...

javascriptjqueryhtml

Incorporate the operating hours of a Business

If I specifically choose Sunday and Monday with working hours ranging from 08.00 to 20.00, the output should be 1&08:00&20:00,2&08:00&20:00. How can I achieve this using Vue.js? This is my current code: <script> submitBox = new Vue( ...

javascriptjqueryhtmlvue.jsvue-component

How come my web page is not displaying the guages from guage.js?

I am utilizing guage.js to create a graph based on this Fiddle. However, upon adding the same code to my website, the rendering does not appear as expected: Upon inspecting in Chrome developer tools, I noticed that the element still exists but lacks heigh ...

javascripthtmljquerycss

Screen remains blank as the React webpage fails to load

Hello, I am having issues with my React page not showing up. Can someone please review my code to see if there are any errors? Here is the edited program: index.html <!doctype html> <html lang="en"> <head> <meta charset ...

htmlreactjstypescriptreact-typescript

Is there anyone who can assist in refining the padding and margin issues within this Galleria.js implementation?

I am struggling to understand why the padding and margins around the images in this slideshow theme on PregoApp are uneven. Despite my attempts to adjust the CSS, the issue persists. You can view the site here. Another website using the same implementati ...

jquerycssslideshow

Tips on updating primeng Panel Menu appearance with scss

I'm looking to customize the color of my panel menu to black. Below is the HTML code I am using. <p-panelMenu styleClass="font-bold text-xs m-0 w-11" [model]="items" [multiple]='false'></p-panelMenu> ...

htmlcssangularsassprimeng

How to eliminate the unnecessary gap between rows in a Vue div displayed as a grid

I have recently started working with Vue and in my current project, I encountered a challenge where I needed to display 2 players in each row within a div. To achieve this, I utilized the display: grid; CSS property on the playerDiv id. However, I am facin ...

javascriptcsstwitter-bootstrapvue.jsvuejs2

Centering text within a dynamic div can help create a visually appealing design

While browsing through various forums, I noticed several questions on stackoverflow that touch upon a similar issue to mine. However, my particular problem is a bit unique, and despite my best efforts, I have not been able to find a solution yet. It's ...

csshtmlalignmentcentertext-alignment

Find the identifier that does not currently exist in the collection of objects

There is a situation where I have an array and an object that consists of arrays of ids, which are essentially permission objects. My goal now is to extract the ids that do not exist in the given object. Can someone assist me with devising the necessary l ...

javascripthtmlangulartypescript

Is there a way to see the default reactions in a browser when keyboard events such as 'tab' keydown occur?

Whenever I press the 'tab' key, the browser switches focus to a different element. I would like to be able to customize the order of focused elements or skip over certain elements when tabbing through a page. While I am aware that I can use preve ...

javascripthtmlbrowserevent-handlingkeyboard-events

display/hide a div within a separate container

Greetings, I am seeking assistance in understanding why the second tab button is not functioning properly. I am attempting to create a layout with a wrapper div, a left side div containing label buttons, and a right side div for displaying content. When I ...

htmlcssnested

The drop-down menu is misaligned from its designated position underneath the title

Trying to incorporate a dropdown menu into my website, I am structuring the HTML as follows: <ul class="topnav"> <li> SECTION TITLE <ul class="subnav"> <li>One</li> <li>Two</li> ...

jqueryhtmlcssdrop-down-menu

Does a browser's cache utilize storage for XMLHttpRequest responses?

I have a question regarding browsers in general, with a focus on Chrome. Imagine I have the following code snippet in my file, index.html: <img src='//path/to/foo.img'></img> The file foo.img changes on my server every hour. I woul ...

javascripthtmlcssgoogle-chromecaching