css_grid

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Exercise 1</title>
    <meta
      content="width=device-width, initial-scale=1, maximum-scale=1"
      name="viewport"
    />

  <style>
  .container{
    /* Step 1: Set display to grid */
      display:grid;
   /* Step 2: setup rows amd columns */
      grid-template-columns: 300px 300px 300px;
      grid-template-rows: 250px 600px;
      grid-template-areas: 
      "hd hd hd hd hd hd hd hd"
      "sd sd sd main main main main main"
      "ft ft ft ft ft ft ft ft"
      "ft1 ft1 ft1 ft1 ft1 ft1 ft1 ft1"
      ;
      border: 2px solid yellow;
  }
  .box{
    border: 1px solid red;
    background: #F8FA9D;
    }
  .header{
    grid-area:hd;
  }
  .footer{
    grid-area:ft;
  }
  .footer{
    grid-area:ft1;
  }
  .sidebar{
    grid-area:sd;
  }
  .content{
    grid-area:main;
  }
  </style>
  </head>

  <body>
  <div class = "container">
    <div class="header box">Header</div>
    <div class="sidebar box">Sidebar</div>
    <div class="content box">Content</div>
    <div class="footer box">Footer</div>
    <div class="footer1 box">Footer1</div>
  </div>
  </body>
</html>