With Grid, you can easily create a page structure. That’s what we’ll do.
Let’s start by making the .page-layout element a grid container.
Our page should have two columns: 50px and auto, one for navigation and one for page content.
There should be three lines: first 50px, second auto, third 50px.
The .page-header and .page-footer elements must completely occupy the first and second lines (two columns).
The .page-sidebar and .page-content elements must occupy the first and second columns of the second line, respectively.

This task is part of the Full-Stack JavaScript Course
If you have any issues with it, you can ask for community help below the post
Feel free to help others if you’ve already solved the task

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>GRID</title>
    <style>
      body {
        font-family: Tahoma;
        margin: 0;
        font-style: italic;
      }

      .page-layout {
        height: 100vh;
        width: 100vw;
      }

      .page-header {
        padding: 5px;
        background-color: #ffb800;
      }

      .page-footer {
        padding: 5px;
        background-color: #0e5ff7;
        color: white;
      }

      .page-sidebar {
        background-color: #00bc8a;
      }

      .page-content {
        padding: 5px;
      }

      .sidebar-item {
        color: #2b6ff8;
        background-color: #f1f5ff;
        height: 40px;
        margin: 5px;
      }
    </style>
  </head>
  <body>
  <div class="page-layout">
    <div class="page-header">I am page header</div>
    <div class="page-sidebar">
      <div class="sidebar-item">S</div>
      <div class="sidebar-item">I</div>
      <div class="sidebar-item">D</div>
      <div class="sidebar-item">E</div>
      <div class="sidebar-item">B</div>
      <div class="sidebar-item">A</div>
      <div class="sidebar-item">R</div>
    </div>
    <div class="page-content">Page content will be here</div>
    <div class="page-footer">I am page footer</div>
  </div>
  </body>
</html>