<!-- https://css-tricks.com/snippets/css/complete-guide-grid/ -->
<div class="container">
   <heading class="banner">
      <h1>My Heading</h1>
   </heading>
   <article class="content"><p>Lorem ipsum dolor sit amet, nam movet interesset ne, labores minimum ea vim, ex per ubique legendos hendrerit. Integre consetetur eum ne. Usu eu nostro dolores abhorreant, eu augue minimum sed. Duo eu idque veritus, eos corpora delicatissimi ea, utroque accusam partiendo sed ea. Mei homero suavitate elaboraret at, ut tacimates disputationi nec. Augue vitae evertitur eu mei, in nam elitr delectus.</p>
      <p>Lorem ipsum dolor sit amet, nam movet interesset ne, labores minimum ea vim, ex per ubique legendos hendrerit. Integre consetetur eum ne. Usu eu nostro dolores abhorreant, eu augue minimum sed. Duo eu idque veritus, eos corpora delicatissimi ea, utroque accusam partiendo sed ea. Mei homero suavitate elaboraret at, ut tacimates disputationi nec. Augue vitae evertitur eu mei, in nam elitr delectus</p>
      <p>Lorem ipsum dolor sit amet, nam movet interesset ne, labores minimum ea vim, ex per ubique legendos hendrerit. Integre consetetur eum ne. Usu eu nostro dolores abhorreant, eu augue minimum sed. Duo eu idque veritus, eos corpora delicatissimi ea, utroque accusam partiendo sed ea. Mei homero suavitate elaboraret at, ut tacimates disputationi nec. Augue vitae evertitur eu mei, in nam elitr delectus</p>
   </article>
   <article class="aside">
      <section>here is a side menu</section>
      <section>here is another side menu</section>
      <section>here is a third menu</section>
   </article>
   <article class="footer">Here is a footer</article>
</div>
.container {
   /* fr: fractional units*/
   display: grid;
   grid-template-columns: 2fr 1fr 0.2fr 1fr;
   grid-template-rows: auto;
   grid-template-areas:
      "header header header header"
      "main main . sidebar"
      "footer footer footer footer";
}

heading, article, section {
   border: solid 1px #000;
   padding: 10px;
}

.banner {
   grid-area: header;
}

.content {
   grid-area: main;
}

.aside {
   grid-area: sidebar;
}

.footer {
   grid-area: footer;
}

.aside > section {
   margin-bottom: 10px;
   padding: 5px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.