W3Schools Tryit Editor

<!DOCTYPE html>
<html>
<title>W3.CSS Grid Areas</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<style>
.mygrid {
  display: grid;
  grid-template-areas:
    "header header"
    "nav main"
    "footer footer";
  grid-template-columns: 150px 1fr;
  gap: 10px;
}

.myheader {grid-area: header;}
.mynav {grid-area: nav;}
.mymain {grid-area: main;}
.myfooter {grid-area: footer;}
</style>

<h2>Grid Areas</h2>
<p>Named grid areas can be used to create page layouts:</p>

<header class="myheader w3-container w3-blue">
    <h2>Header</h2>
  </header>

<nav class="mynav w3-container w3-light-grey">
    <h3>Navigation</h3>
    <p>Home</p>
    <p>Products</p>
    <p>Contact</p>
  </nav>

<main class="mymain w3-container w3-pale-blue">
    <h3>Main</h3>
    <p>This is the main content.</p>
  </main>

<footer class="myfooter w3-container w3-dark-grey">
    <p>Footer</p>
  </footer>

</div>

</body>
</html>