Demo: CSS grid-area

<div class='grid-container'>
  <div class='header'>Header</div>
  <div class='main'>Main Content</div>
  <div class='sidebar'>Sidebar</div>
  <div class='footer'>Footer</div>
</div>

.grid-container {
  display: grid;
  grid-template-areas: 
    'header header'
    'main sidebar'
    'footer footer';
  grid-template-rows: 100px 1fr 50px;
  grid-template-columns: 1fr 250px;
  height: 100vh;
}

.header {
  grid-area: header;
  background-color: #4CAF50;
  color: white;
  text-align: center;
  padding: 20px;
}

.main {
  grid-area: main;
  background-color: #2196F3;
  color: white;
  text-align: center;
  padding: 20px;
}

.sidebar {
  grid-area: sidebar;
  background-color: #FF9800;
  color: white;
  text-align: center;
  padding: 20px;
}

.footer {
  grid-area: footer;
  background-color: #f44336;
  color: white;
  text-align: center;
  padding: 20px;
}

// No JavaScript required for this demo