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


<!DOCTYPE html>
      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;
  <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 class="page-content">Page content will be here</div>
    <div class="page-footer">I am page footer</div>