/*Mobile View*/
.grid-container {
  display: grid;
  grid-template-rows: auto auto auto auto;
}

.grid-title {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}
.grid-menu {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}
.grid-main {
  grid-row: 3 / 4;
  grid-column: 1 / 2;
}
.grid-footer {
  grid-row: 4 / 5;
  grid-column: 1 / 2;
}

/*Tablet and Desktop View*/
@media (min-width: 768px) {
  .grid-container {
    display: grid;
    grid-template-columns: 250px 3fr 1fr;
    grid-template-rows: auto 1fr auto;
  }
  .grid-title {
    grid-row: 1 / 2;
    grid-column: 1 / 4;
  }
  .grid-menu {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
  }
  .grid-main {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
  }
  .grid-footer {
    grid-row: 3 / 4;
    grid-column: 1 / 4;
  }
}