Day 318

More CSS GRID... I am so confused...
#CodingPhase #TheCodingWay #365CodingPhaseChallenge

**********

<style>
    .container {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: 1fr 10fr 1fr;
      grid-template-rows: 150px 150px 100px;
      grid-template-areas:
        "sidebar-1  content   sidebar-2"
        "sidebar-1  content   sidebar-2"
        "footer     footer    footer"
    }
    .footer {
      grid-area: footer;
    }
    .item1 {
      grid-area: sidebar-1;
    }
    .item2 {
      grid-area: content;
    }
    .item3 {
      grid-area: sidebar-2;
    }
    @media (max-width: 700px) {
      .container {
        grid-template-areas:
          "content    content     content"
          "sidebar-1  sidebar-1   sidebar-2"
          "footer     footer      footer"
      }
    }
  </style>