css grid playaround

index.html

<div class="grid">
  <div class="title">title</div>
  <div class="header">header</div>
  <div class="sidebar">sidebar</div>
  <div class="content">content</div>
  <div class="footer">footer</div>
</div>

style.css

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-gap: 4px;
  grid-template-areas: 
    'title title' 
    'header header' 
    'sidebar sidebar'
    'content content'
    'footer footer';
}

.title {
  grid-area: title;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

.grid div:nth-child(even) {
  background-color: red;
}

.grid div:nth-child(odd) {
  background-color: green;
}

@media screen and (min-width: 736px) {
  .grid {
    display: grid;
    grid-template-columns: 1fr 500px 500px 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: 
      '. title title .' 
      '. header header .'
      '. sidebar content .' 
      '. footer footer .';
  }
}