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:

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

Mobile site experiencing slow scrolling speed

The scrolling speed on the mobile version of my website, robertcable.me, seems to be sluggish. Despite conducting thorough research, I have not been able to find a solution. I have attempted to address the issue by removing background-size: cover from my ...

javascripthtmlcss

An HTML attribute that functions like autofocus in the select tag

Is there a way to set the default focus on a select tag in HTML, similar to how autoFocus works for textboxes? I am looking to make a select tag automatically focused when the page loads. Is there a method to achieve this? ...

html

Facing difficulties with the XPATH due to an inability to access specific parts of the HTML code

Currently, I am facing an issue where I need to click on a link using Selenium and Java. When searching for the link using XPath, I am encountering a problem where only white spaces are displayed instead of most of the webpage content. The highlighted link ...

javahtmlseleniumxpath

Blur images on parent div when hovering using javascript

After some extensive searching, I came across a few helpful explanations on how to achieve my desired outcome. By combining them, I was able to get everything working smoothly with the hover effect over the image itself. However, when I attempted to trigge ...

javascripthtmlhoverjquery-isotope

Extract the raw text content from nested elements

Working with highlight.js to include a custom CSS code, however, this library automatically adds span tags around the desired text For example: <pre> <code class="language-css hljs" contenteditable="true" id="css-code&quo ...

javascripthtmlcss

Counting the number of visible 'li' elements on a search list: A guide

In the following code snippet, I am attempting to create a simple search functionality. The goal is to count the visible 'li' elements in a list and display the total in a div called "totalClasses." Additionally, when the user searches for a spec ...

javascriptjqueryhtmlcss

Ways to make a div fill the whole screen and allow for scrolling as well

Issue I'm facing an issue with the login.php screen and the addphoto.php screen. I want these screens to cover the entire page, but despite using the following code: .login-screen, .form-screen { position: fixed; top: 0; left: 0; disp ...

htmlcss

Is there a way to retrieve the HTML code of a DOM element created through JavaScript?

I am currently using java script to generate an svg object within my html document. The code looks something like this: mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); myPath = document.createElementNS("http://www.w3.org/2000/svg", ...

javascripthtmldom

Positioning a flex item to the right by using float

I am in need of assistance with my HTML layout. <div class="container"> <div class="sidebar" style="float:right"> Ignore sidebar? </div> <div> main content </div> </div> The container is set to have a flex disp ...

htmlcssflexbox

Is it possible to apply CSS styling to all placeholders in a Sencha Touch application?

Having trouble figuring out how to style all the placeholders in my application with CSS. I've attempted a few different methods: .customField input::-webkit-input-placeholder { color: #2e4bc5; } .x-text-field input::webkit-input-placeholder{ c ...

csssencha-touch-2.3

Setting a bookmark feature in HTML using localStorage: A step-by-step guide

I'm working on a simple code that captures the text content of a dynamically updated <h1> element and stores it as a "bookmark" in localStorage. I want to enable users to save or delete the bookmark by clicking a button. Below is a basic version ...

javascripthtmllocal-storage

Chrome is the only browser that displays the correct number of columns, unlike IE and Firefox

[Link removed] Is anyone else experiencing an issue with the columns on a website layout? I have 5 columns set up with each post taking up 20% width. It looks fine in Chrome, but in IE and Firefox, the last column gets pushed below so there are only 4 col ...

cssgrid

Pause until the existence of document.body is confirmed

Recently, I developed a Chrome extension that runs before the page fully loads by setting the attribute "run_at": "document_start". One issue I encountered is that I need to insert a div tag into the body of the webpage as soon as it is created. However, a ...

javascripthtmlcssevent-handlingdom-events

Utilizing mobile emulators to optimize the viewport for mobile application development

Are mobile emulators like MITE() able to detect viewport settings? <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> Can anyone recommend a mobile emulator that does recognize viewport settin ...

htmlcssmobilemedia-queriesviewport

Bug on a Safari browser when using a dotted border on a table

Issue in Safari and Chrome browsers: CSS: TABLE { width: 100%; clear: both; border: 0px; border-collapse: collapse; } TABLE TH, TABLE TD { padding: 10px; text-align: center; border: 1px dotted #898989; } ...

htmlcsssafari

What is the best way to emphasize the current page within my Bootstrap <nav> menu?

Below is the Bootstrap code that defines our main menu navigation: <div class="col-xl-9 col-lg-9"> <div class="main-menu d-none d-lg-block"> <nav> ...

javascripthtmljquerycsstwitter-bootstrap

Images of equal height without compromising the resolution

How can I create responsive images with the same height inside a DIV tag, with a specified height of 200px? Any assistance would be greatly appreciated. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="desc ...

htmlcss

Is it the right time to dive into HTML5 & CSS3?

The excitement around HTML5 and CSS3 is hard to ignore. But when is the right time to start incorporating them into our projects? How close are we to fully utilizing their capabilities? Update: I'm not interested in following the principles of: Grac ...

htmlcss

What is the process for embedding HTML and CSS content into an Outlook email?

Has anyone experienced trouble adding an HTML and CSS web page to an Outlook email? I attempted to use the "Insert as text" option, but the CSS file is not loading correctly in Outlook. Any suggestions on how to fix this? The error message states that the ...

jquerycsshtmlweb

Display block disappearance persists even after being set to none

Presented below is my menu design: <div class="span2 main-menu-span"> <div class="well nav-collapse sidebar-nav"> <ul class="nav nav-tabs nav-stacked main-menu"> <li class="nav-header hidden-tablet"><span ...

htmlcss