CSS-grid-responsive-layout.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --main-radius: 5px;
  --main-padding: 5px;
}
.container {
  padding: 10px;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-gap: 0.2rem;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 0.2fr 1.5fr 1.2fr 0.8fr;
  grid-template-areas:
    "nav nav nav nav"
    "sidebar main main main"
    "sidebar main main main"
    "sidebar c1 c2 c3"
    "sidebar footer footer footer";
  /* Fonts */
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  font-family: "Inter", sans-serif;
}
nav {
  grid-area: nav;
  background: teal;
  border-radius: var(--main-radius);
  padding: var(--main-padding);
}
#side-bar {
  grid-area: sidebar;
  background: steelblue;
  border-radius: var(--main-radius);
  padding: var(--main-padding);
}
main {
  grid-area: main;
  background: slategray;
  border-radius: var(--main-radius);
  padding: var(--main-padding);
}
.content1 {
  grid-area: c1;
  background: green;
  border-radius: var(--main-radius);
  padding: var(--main-padding);
}
.content2 {
  grid-area: c2;
  background: forestgreen;
  border-radius: var(--main-radius);
  padding: var(--main-padding);
}
.content3 {
  grid-area: c3;
  background: palegreen;
  border-radius: var(--main-radius);
  padding: var(--main-padding);
}
footer {
  grid-area: footer;
  background: crimson;
  border-radius: var(--main-radius);
  padding: var(--main-padding);
}

/* Responsiveness */
@media only screen and (max-width: 550px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr;
    grid-template-areas:
      "nav"
      "sidebar"
      "main"
      "c1"
      "c2"
      "c3"
      "footer";
  }
}