<body>
  <section class="container">
    <header class="header"> 
      <h1>This is a CSS Grid Layout Example</h1>
    </header>
    <nav class="nav">
      <p>This is the navigation. </p>
    </nav>
    <main class="content">
      <p>This is the main content.</p> <p>Lorem ipsum dolor sit amet, his eruditi habemus reprehendunt ea, splendide intellegebat sed ex, sed ex quis soluta doming. Per cu quodsi dissentiunt. Mandamus elaboraret persequeris vis eu. Magna choro malorum usu at, nam ea discere inermis perfecto.</p><p>Prima ipsum consulatu ne vix, et quod propriae qui, et eos integre aliquam. Ex moderatius assueverit mei. Vix te vocibus eligendi, sea id mazim luptatum. Est te laudem euismod volumus, an sit inermis feugait delicatissimi. Ei tantas fierent quo.</p><p>Quo putent noster delicatissimi ut. Per in error periculis, sea ad molestie salutandi. Nisl munere pericula mea ad. Ea eirmod mandamus reprehendunt eos, eum an singulis temporibus, at pri aeque dolores. Ex sea nostro perfecto, eum id euismod voluptaria, primis voluptaria cu sea. Sit at falli soleat indoctum.</p><p>Eum in velit soluta maiestatis, nec omnes noluisse signiferumque in. Eam quod eripuit meliore cu. Ne stet nobis consectetuer sed. An mea graeci lobortis nominati, duis cotidieque id est, ad quod aliquando nam. Mei eu aeterno ceteros noluisse, ad mel oblique maiestatis.</p><p>Id facete posidonium delicatissimi vix, solum semper ceteros nam ad. Bonorum dolores constituam ad vix. Sit ut etiam essent ancillae. Enim inani forensibus duo in, his id scripta recteque iudicabit. Ne nemore ceteros vis, ex duis persequeris vis. His debitis phaedrum at, vis ut docendi antiopam. No movet munere audiam vim, te vim unum numquam.</p>
    </main>
    <aside class="sidebar-right">
      <p>This is the right sidebar. </p>
    </aside>
    <footer class="footer">
      <p>Lorem ipsum dolor sit amet, his eruditi habemus reprehendunt ea, splendide intellegebat sed ex, sed ex quis soluta doming. Per cu quodsi dissentiunt. Mandamus elaboraret persequeris vis eu. Magna choro malorum usu at, nam ea discere inermis perfecto.</p><p>Prima ipsum consulatu ne vix, et quod propriae qui, et eos integre aliquam. Ex moderatius assueverit mei. Vix te vocibus eligendi, sea id mazim luptatum. Est te laudem euismod volumus, an sit inermis feugait delicatissimi. Ei tantas fierent quo.</p><p>Quo putent noster delicatissimi ut. Per in error periculis, sea ad molestie salutandi. Nisl munere pericula mea ad. Ea eirmod mandamus reprehendunt eos, eum an singulis temporibus, at pri aeque dolores. Ex sea nostro perfecto, eum id euismod voluptaria, primis voluptaria cu sea. Sit at falli soleat indoctum.</p>
    </footer>
  </section>
</body>
body {
  padding: 20px;
}

.container {
 display: grid;
 grid-template-areas: "header"
                       "nav"
                       "main"
                       "aside-right"
                       "footer";
  grid-template-columns: 100%;
  grid-template-rows: 100px
                      200px
                      1fr
                      150px
                      150px;
  grid-gap: 10px;
}

@media screen and (min-width: 769px) {
  .container {
   display: grid;
   grid-template-areas: "header header"
                         "nav main"
                         "aside-right aside-right"
                         "footer footer";
    grid-template-columns: 30% 70%;
    grid-template-rows: 100px
                        1fr
                        150px
                        150px;
    grid-gap: 10px;
  }
}

@media screen and (min-width: 900px) {
  .container {
    display: grid;
    grid-template-areas: "header header header"
                         "nav main aside-right"
                         "footer footer footer";
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: 100px 
                        1fr 
                        30px;
    grid-gap: 10px;
  }
}

.header {
  grid-area: header;
}

.nav {
  background-color: lightgrey;
  padding: 10px;
  grid-area: nav;
}

.content {
  background-color: #e86b49;
  color: #fff;
  grid-area: main;
  padding: 10px;
}

.sidebar-right {
  background-color: lightgrey;
  padding: 10px;
  grid-area: aside-right;
}

.footer {
  background-color: #5CB860;
  color: #fff;
  grid-area: footer;
  padding: 10px;
}


// You have to enable the experimental web platform features flag in Google Chrome to see CSS grid in action

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.