grid

by Van Hai Le

HTML

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>

CSS

.item1 {grid-area: header;}
.item2 {grid-area: menu;}
.item3 {grid-area: main;}
.item4 {grid-area: right;}
.item5 {grid-area: footer;}

.grid-container {
  display: grid;
  grid-template-areas: 
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  grid-gap: 10px;
  padding: 10px;
  background: skyblue;
}

.grid-container > div {
  background: #ede9e3;
  text-align: center;
  padding: 20px 0;
  font-size: 2rem;
  color: #666;
  font-family: Segoe UI;
}