How To Create A Grid Layout Example

<!DOCTYPE html>
<html>
<head>
<title>Website Grid Layout Example</title>
<style>
  body {
    font-family: sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #eee;
  }
  
  .grid-container {
    display: grid;
    gap: 15px;
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    
    /* Define the names of the grid areas */
    grid-template-areas: 
      "header header header header"
      "nav main main sidebar"
      "footer footer footer footer";
      
    /* Define row heights */
    grid-template-rows: 80px auto 60px;
  }

/* Assign each div to its respective grid area name */
  .header { grid-area: header; }
  .nav { grid-area: nav; }
  .main { grid-area: main; }
  .sidebar { grid-area: sidebar; }
  .footer { grid-area: footer; }

/* Generic styling for the layout boxes */
  .grid-container > div {
    background-color: #007bff;
    color: white;
    padding: 20px;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

/* Make it responsive for mobile */
  @media (max-width: 576px) { /* Increase this to 768px to make it responsive for tablets */
    .grid-container {
      /* Redefine the areas into a single column! */
      grid-template-areas: 
        "header"
        "nav"
        "main"
        "sidebar"
        "footer";
        
      /* Set rows to auto height */
      grid-template-rows: auto;
    }
    
    .grid-container > div {
      padding: 30px 20px;
    }
  }
</style>
</head>
<body>

<h3>CSS Grid Layout with Areas</h3>
<p>Resize your window! CSS Grid Template Areas allow us to completely redesign the page layout structure for mobile phones simply by rearranging the area names in our CSS.</p>

<div class="grid-container">
  <div class="header">Header</div>
  <div class="nav">Nav Menu</div>
  <div class="main">Main Content Area</div>
  <div class="sidebar">Sidebar</div>
  <div class="footer">Footer</div>
</div>

</body>
</html>