Grid Template Areas

Named grid areas allow you to create more readable layouts.

Example:

<style>
.container {
  display: grid;
  grid-template-areas:
"header header"
"sidebar main"
"footer footer";
  grid-template-columns: 1fr 3fr;
  gap: 10px;
}
.header { grid-area: header; background: lightgreen; }
.sidebar { grid-area: sidebar; background: lightblue; }
.main { grid-area: main; background: lightcoral; }
.footer { grid-area: footer; background: lightgray; }
</style>

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

Practice Task:
Design a typical webpage layout with a header, sidebar, main content, and footer.