Vorlage

Grid

by marusti

HTML

<div class="mr-grid-container">
  <div class="mr-nav">
    <nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>
    
  </div>
  <div class="mr-header">header</div>
  <div class="mr-main">main</div>
  <div class="mr-footer">footer</div>
</div>

CSS

html, body, .mr-grid-container { height: 100%; margin: 0; }

.mr-grid-container * { 
 /*border: 1px solid red;*/
 position: relative;
}

.mr-grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 300px 60px 1fr 60px;
  grid-template-areas: "mr-header" "mr-nav" "mr-main" "mr-footer";
}

.mr-nav { grid-area: mr-nav; 
  display: grid;            
  align-items: center;      
  justify-items: center;  }

.mr-header { grid-area: mr-header; }

.mr-main { grid-area: mr-main; }

.mr-footer { grid-area: mr-footer; 
  display: grid;            
  align-items: center;      
  justify-items: center;  }