CSS Grid Layout

grid-layout.css

.container {
  height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: 5px;
}

@media (max-width: 800px) {
  .container {
    grid-template-columns: none;
  }
}

.header {
  grid-column-start: 1;
  grid-column-end: -1;
  padding: 5px;
}

.footer {
  grid-column-start: 1;
  grid-column-end: -1;
}