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>