Demo: CSS grid-template-areas

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

.grid-container {\n  display: grid;\n  grid-template-areas: \'header header\' \'sidebar main\' \'footer footer\';\n  grid-template-columns: 1fr 3fr;\n  grid-template-rows: auto 1fr auto;\n  height: 100vh;\n} \n.header {\n  grid-area: header;\n  background-color: #4CAF50;\n  color: white;\n  text-align: center;\n  padding: 20px;\n} \n.sidebar {\n  grid-area: sidebar;\n  background-color: #2196F3;\n  color: white;\n  padding: 20px;\n} \n.main {\n  grid-area: main;\n  background-color: #f4f4f4;\n  padding: 20px;\n} \n.footer {\n  grid-area: footer;\n  background-color: #333;\n  color: white;\n  text-align: center;\n  padding: 10px;\n}

// No JavaScript required for this demo