how to use css grid to display components at particular area-CodePudding

here's my html code

<div>
  <div id="navbar" >Navbar</div>
  <div id="sidenav " >Side Navbar</div>
  <div id="main " >Main</div>
  <div id="footer " >Footer</div>
</div>

and here's my scss code


div{
  display: grid;
  width:100%;
  height: 100%;
  grid-template-columns: 25% 75% 25%;
  grid-gap: 15px;
  grid-template-rows:25% 50% 25% ;
  // grid-gap: 15px;

  grid-template-areas:
  "hd hd hd "
  "sd ma ma "
  "ft ft ft ";

  .box{
    display: flex;
    // text-align: center;
    border: 3px solid red;
    /* width:150px;
    height: 150px; */
    margin: auto;
    align-items: center;
    justify-content: center;
  }
  #navbar{
    grid-area: hd;
  }
  #sidenav{
    grid-area: sd;
  }
  #main{
    grid-area: ma;
  }
  #footer{
    grid-area: ft;
  }


}

the problem is the footer div doesn't display in the bottom here's a screenshot

what i want is to make the footer display at the bottom so what seems to be the problem here

CodePudding user response：

There are some issues that I found in your code which makes the layout little wonky.

grid-template-columns: 25% 75% 25%;

The column total is more than 100%, so it will not work perfectly.

I would highly recommend you to use a CSS grid generator online like https://grid.layoutit.com/

For your layout, I would also not recommend structure 3x3 (columns and rows) - As from the image you shared above it looks like the following

1 row - For "Navbar" (this doesnt need any sub columns)
1 row - For Content -> this has 2 columns 1 for "SideNav" and 1 for "Main"
1 row - For "Footer" (again you dont need sub columns)

Based on this your HTML structure will end up looking like

<div >
  <div >Navbar</div>
  <div >
    <div >Side Nav</div>
    <div >Main</div>
  </div>
  <div >Footer</div>
</div>

And your CSS will look like 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;
}

Here, if you check the code well, the container has 3 rows (25% - navbar, 50% - content, 25% - footer)

And then content has 2 columns (360px - Sidenav, 1fr - Main)

Hope this helps :)

You can also see the code live on my codepen : https://codepen.io/raunaqpatel/pen/WNyQqmm

Or here:

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;
}

<div >
  <div >Navbar</div>
  <div >
    <div >Side Nav</div>
    <div >Main</div>
  </div>
  <div >Footer</div>
</div>