Issue with CSS causing elements to display improperly within nested grids

I am facing an issue where I want to nest a grid within another grid, but the elements in the nested grid are not appearing in the order I desire. Specifically, I would like the "#classes" section to be at the bottom of the nested grid, but it remains stuck at the top. Unfortunately, I am unable to alter the HTML directly as per the exercise requirements, so rearranging elements in the HTML file is not a viable option for me. The desired column layout is as follows:

Navigation
Header
Main (products -> story -> classes)
Aside
Footer

Being new to CSS, any assistance with this matter would be greatly appreciated.

html {
        box-sizing: border-box;
        margin:0;
        padding:0;
}
* {
        box-sizing: border-box;
}
body {
        font-family: Georgia, serif;
        font-size: 100%;
        background-color: white;
        margin: 0;
        padding: 0;
}


/*GRID LAYOUT*/
#container {
        display: grid;
        width: 100%;
        grid-template-rows: 5em  auto auto auto auto auto 5em;
        grid-template-columns: auto;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        grid-template-areas: 
        "nav"
        "header"
        "main"
        "main"
        "main"
        "aside"
        "footer";
}
nav {
        grid-area: nav;
}
header {
        grid-area: header;
}
footer {
        grid-area: footer;
}
aside {
        grid-area: aside;
}
main {
        grid-area: main;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: 
        "products"
        "story"
        "classes";
}
#products {
        grid-area: products;
}
#story {
        grid-area: story;
}
#classes {
        grid-area: classes;
}
<!DOCTYPE html>
<html lang="en" class="surf">

  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles/style.css">
    <link rel="stylesheet" href="styles/normalize.css">
    <title>Surf Co</title>    
  </head>

  <body>                                                                      
    <div id="container">
      <header>
        <h1>Lorem Ipsum Surf Co</h1>
        <p> Ripper nose open face tide!</p>
      </header>

      <nav>
        <ul>
          <li><a href="">Surf</a></li>
          <li><a href="">Travel</a></li>
          <li><a href="">Contact</a></li>
          <li><a href="">Work</a></li>
        </ul>
      </nav>
      
      <main>  
        <!-- Articles content here -->
      </main>

      <aside id="newsletter">
        <!-- Newsletter content here -->
      </aside>

      <footer>
        <!-- Footer content here -->
      </footer>
        
    </div><!-- end of container -->
  </body>
</html>

Answer №1

Your grid-template-areas needs adjustment - remove the double quotes between the grid-areas, like this:

grid-template-areas: "products story classes";

Here's a correct example:

html {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

body {
  font-family: Georgia, serif;
  font-size: 100%;
  background-color: white;
  margin: 0;
  padding: 0;
}


/*GRID LAYOUT*/

#container {
  display: grid;
  width: 100%;
  grid-template-rows: 5em auto auto auto auto auto 5em;
  grid-template-columns: auto;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-areas: "nav header main main main aside footer";
}

nav {
  grid-area: nav;
}

header {
  grid-area: header;
}

footer {
  grid-area: footer;
}

aside {
  grid-area: aside;
}

main {
  grid-area: main;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "products story classes";
}

#products {
  grid-area: products;
}

#story {
  grid-area: story;
}

#classes {
  grid-area: classes;
}
<div id="container">
  <header>
    <h1>Lorem Ipsum Surf Co</h1>
    <p> Ripper nose open face tide!</p>
  </header>

  <nav>
    <ul>
      <li><a href="">Surf</a></li>
      <li><a href="">Travel</a></li>
      <li><a href="">Contact</a></li>
      <li><a href="">Work</a></li>
    </ul>
  </nav>

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

If the iframe's CSS source is updated, the parent's CSS source will also change

I'm currently working on a unique school project that involves creating multiple CSS styles for different views. <link rel="stylesheet" type="text/css" href="css/main.css" title="main" media="screen"> <link rel="stylesheet" type="text/css" h ...

Bring in styles from the API within Angular

My goal is to retrieve styles from an API and dynamically render components based on those styles. import { Component } from '@angular/core'; import { StyleService } from "./style.service"; import { Style } from "./models/style"; @Component({ ...

Incorporate a comma after the second or third digit to separate currency values in JavaScript

Is there a way to add commas to currency values at the 3rd or 2nd place depending on the value itself? The desired output format is: 1000 => 1000 10000 => 10,000 210000 => 2,10,000 2010000 => 20,10,000 12010000 => 1,20,10,000 I am currentl ...

Horizontal scrolling overflow disrupts vertical overflow visibility

I am attempting to display a container containing input elements that receive a warning bubble positioned absolutely when the input is invalid. However, the issue I am facing is that the bubble does not extend beyond the boundaries of the container as anti ...

Utilizing AnimateCSS within a ReactJs component

After installing Animate.CSS with the command npm install animate.css --save, I noticed it was saved in the directory ./node_modules as a locally packaged module. I went through the Animate.CSS documentation on Github, which mentioned that adding class na ...

Implement CSS to stack images upon zooming

On my menu page, I have two images that I want to display side by side in the web browser and stacked on top of each other in a column when viewed on mobile. Currently, with framework7's row and column classes, the images are positioned next to each o ...

Hugo inquired about the process of including a class specifically for the final post

I've set up my baseof.html file to add the class first-post to the body tag in order to style the first post differently from the rest, especially when paginated: <body class=" {{ with where site.RegularPages "Type" "posts" }} {{ $first_post = ind ...

If the URL hash matches the ID of a specific div, then take action on the div's child element

Imagine I have the following HTML structure: <div class=".blog-item-holder"> <div id="AAAA"><div class="inner">AAAA</div></div> <div id="BBBB"><div class="inner">BBBB</div></div> <div id="CCCC">& ...

Shuffle letters in a word when hovered over, then unscramble them back to their original order

I have noticed a fascinating effect on several websites. To give you an idea, here are two websites that showcase this effect: Locomotive and TUX. Locomotive is particularly interesting to look at as the desired effect can be seen immediately when hovering ...

Adjust the Bootstrap Navbar by positioning one navigation item to the right side

I want to align the logout button to the right within my bootstrap navbar. https://i.stack.imgur.com/PDvSv.png Here is a demonstration of the current behavior: https://codepen.io/agrawalo/pen/mdbKYLX Code: <nav class="mb-1 navbar navbar-expand-sm na ...

center a horizontal line using StyledSheets in your project

After drawing a horizontal line, I noticed that it is positioned towards the left side of the screen. I am hesitant to increase its width. Are there any other methods to move it to the center? I attempted wrapping it with another view and using alignConten ...

Discrepancy in Angular Material Buttons with theme design

I recently installed Angular 10 along with Angular Materials using the command ng add @angular/material I opted for the custom theme: Purple/Green The next step was to add a Toolbar by simply copying and pasting code from Google's site. However, I a ...

Positioning borders in an Outlook table

While experimenting with Mjml, I encountered an issue where I struggled to place the border exactly where it needed to be in order for my table to function correctly. It was a bit of a do-it-yourself solution, but it was the only way I managed to make it w ...

jQuery sidebar with a fixed position

Is there a way to implement a sidebar menu feature using jQuery that reappears on the left as the user scrolls down the page? You can see an example sidebar menu here. ...

Using Javascript code to draw particles at the cursor's position and then directing those particles towards the bottom of

I found an interesting JavaScript code snippet that creates a bubble particles effect around the cursor. You can download it from https://github.com/tholman/90s-cursor-effects. However, I encountered a problem when adding certain elements inside a specifi ...

Expand Navigation Bar upon Hover

My goal is to recreate a Navigation Bar similar to the one found on this website: I want the Navigation Block to expand and show Menu Items when hovered over, just like the example on the website mentioned above. I've attempted to use Bootstrap and ...

The collapsible tree nodes overlap one another in the D3.js visualization

I'm currently working on integrating a d3 code into Power BI for creating a collapsible tree structure. Each node in the tree is represented by a rectangular box, but I've run into an issue where nodes overlap when their size is large. Below is t ...

Learn how to create a horizontally scrollable ToggleButton using MUI when the ToggleButtonGroup exceeds the screen width

Looking to enhance the responsiveness of my web design project, I aim to create a horizontally scrollable ToggleButton using Mui. The goal is to have the buttons adjust when the screen width becomes too narrow to display all three buttons at once, allowing ...

Can someone please show me how to position this H1 in the center at the bottom of the div?

Looking for a simple solution to place text at the bottom of a div without turning the entire div into a grid. New to HTML/CSS and struggling with vertical alignment issues... <!DOCTYPE html> <html> <head> <title>Creating an O ...

Steps to create a dynamic <div> that is only visible within a parent <div>

First of all, I want to express my gratitude for welcoming me into the group. I am seeking assistance with an inquiry regarding jQuery animation. The specific animation in question can be seen on the navigation menu items of this template from Template Mon ...