I noticed a few issues in your code that are causing the layout to appear a bit off.
grid-template-columns: 25% 75% 25%;
The total column width exceeds 100%, which can lead to rendering problems.
For a better solution, I suggest using an online CSS grid generator like
In terms of structuring your layout, I recommend the following:
- 1 row for "Navbar" (no sub columns needed)
- 1 row for Content with 2 columns: 1 for "SideNav" and 1 for "Main"
- 1 row for "Footer" (no sub columns needed)
Based on this recommendation, your HTML structure should resemble:
<div class="container">
<div class="navbar">Navbar</div>
<div class="Content">
<div class="SideNav">Side Nav</div>
<div class="Main">Main</div>
</div>
<div class="Footer">Footer</div>
</div>
Your CSS code will then look similar to this:
body{
padding: 0;
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 25% 50% 25%;
gap: 0px 0px;
grid-template-areas:
"navbar"
"Content"
"Footer";
}
.navbar {
grid-area: navbar;
background-color: #f5f5f5;
padding: 16px;
text-align: center;
}
.Content {
display: grid;
grid-template-columns: 360px 1fr;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-template-areas:
"SideNav Main";
grid-area: Content;
}
.SideNav {
grid-area: SideNav;
background-color: #e5e5e5;
padding: 16px;
}
.Main {
grid-area: Main;
background-color: salmon;
padding: 16px;
}
.Footer {
grid-area: Footer;
background-color: #d5d5d5;
padding: 16px;
text-align: center;
}
This layout features 3 rows within the container (25% - navbar, 50% - content, 25% - footer) and content divided into 2 columns (360px - Sidenav, 1fr - Main).
I hope this explanation clarifies any confusion :)
You can also view the live code on my CodePen profile here: https://codepen.io/raunaqpatel/pen/WNyQqmm
Alternatively, see the code snippet below:
body{
padding: 0;
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 25% 50% 25%;
gap: 0px 0px;
grid-template-areas:
"navbar"
"Content"
"Footer";
}
.navbar {
grid-area: navbar;
background-color: #f5f5f5;
padding: 16px;
text-align: center;
}
.Content {
display: grid;
grid-template-columns: 360px 1fr;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-template-areas:
"SideNav Main";
grid-area: Content;
}
...
<div class="container">
<div class="navbar">Navbar</div>
<div class="Content">
<div class="SideNav">Side Nav</div>
<div class="Main">Main</div>
</div>
<div class="Footer">Footer</div>
</div>