CSS Grid Simple Responsive Layout

Summary

Simple demonstration of a responsive layout using css grid - header, aside, main, footer and navigation areas.

Mobile first approach.

There is a break point at 700px and another one at 900px.

Resise the screen for responsive layout.

HTML

<div class="container">
  <header>Header</header>

  <nav>Menu</nav>

  <main>
    <h1>Main Article</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cum eum tempore
      voluptatum nostrum expedita, officia error magnam, perferendis
      exercitationem hic eaque aliquid. Ex impedit quidem vero. Sapiente porro
      commodi voluptates itaque modi nulla! Corporis, laudantium! Temporibus,
      consequuntur. Assumenda ea aliquid soluta aspernatur illum, non at porro
      libero earum expedita placeat?
    </p>
  </main>

  <aside>Sidebar</aside>

  <section>Advertising</section>

  <footer>Footer</footer>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700&family=Poppins:wght@400;700&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: white;
  margin: 20px;
}

.container {
  display: grid;
  gap: 20px;
  grid-template-areas:
    'header'
    'nav'
    'main'
    'aside'
    'ad'
    'footer';
}
header {
  grid-area: header;
  background-color: hotpink;
  height: 150px;
  padding: 10px;
}
nav {
  grid-area: nav;
  background-color: blue;
  color: white;
  padding: 10px;
}

main {
  grid-area: main;
  background-color: violet;
  height: 400px;
  padding: 10px;
}
aside {
  grid-area: aside;
  background-color: greenyellow;
  min-height: 100px;
  padding: 10px;
}
section {
  grid-area: ad;
  background-color: yellow;
  min-height: 100px;
  padding: 10px;
}
footer {
  grid-area: footer;
  background-color: goldenrod;
  min-height: 100px;
  padding: 10px;
}

@media screen and (min-width: 700px) {
  .container {
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
      'header header'
      'nav nav'
      'aside main'
      'ad footer';
  }
}

@media screen and (min-width: 900px) {
  .container {
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-areas:
      'header header header'
      'nav main aside'
      'nav main ad'
      'footer footer footer';
  }
}

Tech and Tools

• CSS Grid
• HTML
• Media Query
• JS Fiddle

Demo

Open demo on JS Fiddle. (Clicking the link will open up a new window.)

Link to Demo