grid-template-areas for main_new, page.tag

Possibly a different method to lay out the redesigned miv site

by Stephen

HTML

<section id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>
  <h1>Main area</h1>
  <section id="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lacus sapien, viverra vel consequat sit amet, porta vitae orci. Mauris hendrerit molestie nunc, nec finibus purus facilisis at. Fusce id elit diam. Maecenas augue enim, semper et enim et, tristique imperdiet dui. Morbi egestas pellentesque rutrum. Sed aliquam lectus bibendum metus consequat, et sagittis justo gravida. Cras gravida quis ante nec rutrum. Ut eu semper dui. Phasellus non velit lacinia, viverra magna quis, ultricies dolor. Donec id massa vel urna aliquet rhoncus id vel sem. Sed eu sem ac neque lacinia consectetur sed vel leo. Nullam consequat, neque a varius commodo, lorem tellus congue nisi, et placerat ex mauris in lacus.</p>

<p>Morbi et leo nunc. Fusce placerat sollicitudin est. Vestibulum ultricies libero a efficitur malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed et gravida quam. Curabitur malesuada eget purus id pulvinar. Sed nec sagittis diam. Nunc porta justo eros, nec bibendum dui eleifend vitae. Cras non eleifend enim. Etiam nec urna nunc. Praesent efficitur, massa id porta scelerisque, tortor lacus vulputate lectus, in tincidunt eros metus eu nunc.</p>

<p>Integer cursus maximus massa rutrum iaculis. Aliquam in efficitur enim, vitae congue orci. Nulla porttitor enim non odio feugiat tempor. Integer vel nunc tempus, rutrum urna sed, maximus enim. Cras ac arcu non quam mattis imperdiet. Fusce posuere turpis sollicitudin justo gravida suscipit. Nam sed leo ante.</p>

<p>Proin molestie metus urna, sed commodo lorem convallis vitae. Duis in tortor non dui commodo sollicitudin. Curabitur finibus felis eu nulla accumsan, vitae finibus lectus rhoncus. Praesent lectus neque, vestibulum in vestibulum eu, bibendum non nisl. Maecenas dolor dui, porta vitae metus at, accumsan ultrices tortor....

CSS

#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas:
    "head head"
    "nav  main"
    "nav  foot";
  grid-template-rows: 50px 1fr;/*50px 1fr 30px;*/
  grid-template-columns: 50px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
  overflow-y: scroll;
}

#page > main > * {
    padding: 0 1rem;
}