<header>
  Header
</header>
<article>
  <h1>Article title</h1>
  <p>Article content</p>
</article>
<aside>
  Navigation menu
</aside>
<footer>
  Footer
</footer>

@use postcss-preset-env{
  stage: 0;
}

body {
  height: 100vh;
  
  display: grid;
  grid-template-areas:
    'header header'
    'menu   content'
    'footer footer';
  grid-template-columns: 12rem 1fr;
  grid-template-rows: 5rem 1fr 3rem;
  
  @media (max-width: 600px) {
    grid-template-areas:
      'header'
      'menu'
      'content'
      'footer';
    grid-template-columns: 1fr;
    grid-template-rows: 5rem auto 1fr 3rem;
  }
}


body > * {
  padding: 1rem;
  border: 1px solid goldenrod;
}

header {
  grid-area: header;
}

article {
  grid-area: content;
}

aside {
  grid-area: menu;
}

footer {
  grid-area: footer;
}