CSS Grid - Holy Grail Layout

By Christine Siu

How do I use This?

The classic web pattern of a header, footer, and three columns.

HTML

<div class="holy-grail-grid">
  <div class="holy-grail-header">
    <h3>Header</h3>
  </div>

  <div class="holy-grail-left">
    <h3>Nav</h3>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </div>

  <div class="holy-grail-middle">
    <h3>Content</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias mollitia debitis at atque temporibus ratione molestiae id eos, cupiditate numquam dolor vero totam, quisquam libero voluptas. Animi ipsa cumque, tempore.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias mollitia debitis at atque temporibus ratione molestiae id eos, cupiditate numquam dolor vero totam, quisquam libero voluptas. Animi ipsa cumque, tempore.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias mollitia debitis at atque temporibus ratione molestiae id eos, cupiditate numquam dolor vero totam, quisquam libero voluptas. Animi ipsa cumque, tempore.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias mollitia debitis at atque temporibus ratione molestiae id eos, cupiditate numquam dolor vero totam, quisquam libero voluptas. Animi ipsa cumque, tempore.</p>
  </div>

  <div class="holy-grail-right">
    <h3>Nav</h3>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </div>

  <div class="holy-grail-footer">
    <h3>Footer</h3>
  </div>

</div>

.holy-grail-grid {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: 1fr 8fr 1fr;
  grid-gap: 20px;
  height: 100vh;

  // redefining grid on small
  @media screen and (max-width: 60em) {
    grid-template-rows: 2fr 1fr 5fr 1fr;
  }
}

.holy-grail-header,
.holy-grail-left,
.holy-grail-middle,
.holy-grail-right,
.holy-grail-footer {
  padding: 1rem;
  border: 1px solid #ededed;
  background-color: #ededed
}

.holy-grail-header {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
}

.holy-grail-left {
  @media screen and (max-width: 60em) {
    grid-row-start: 2;
    grid-column-start: 1;
    grid-column-end: 4;
  }
}

.holy-grail-middle {
  @media screen and (max-width: 60em) {
    grid-row-start: 3;
    grid-column-start: 1;
    grid-column-end: 4;
  }
}

.right-nav {
  @media screen and (max-width: 60em) {
    grid-row-start: 4;
    grid-column-start: 1;
    grid-column-end: 4;
  }
}

.holy-grail-footer {
  grid-column-start: 1;
  grid-column-end: 4;
}

.holy-grail-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 3fr 1fr;
      grid-template-columns: 1fr 3fr 1fr;
  -ms-grid-rows: 1fr 8fr 1fr;
      grid-template-rows: 1fr 8fr 1fr;
  grid-gap: 20px;
  height: 100vh;
}

@media screen and (max-width: 60em) {
  .holy-grail-grid {
    -ms-grid-rows: 2fr 1fr 5fr 1fr;
        grid-template-rows: 2fr 1fr 5fr 1fr;
  }
}

.holy-grail-header,
.holy-grail-left,
.holy-grail-middle,
.holy-grail-right,
.holy-grail-footer {
  padding: 1rem;
  border: 1px solid #ededed;
  background-color: #ededed;
}

.holy-grail-header {
  -ms-grid-column: 1;
      grid-column-start: 1;
  grid-column-end: 4;
  -ms-grid-row: 1;
      grid-row-start: 1;
}

@media screen and (max-width: 60em) {
  .holy-grail-left {
    -ms-grid-row: 2;
        grid-row-start: 2;
    -ms-grid-column: 1;
        grid-column-start: 1;
    grid-column-end: 4;
  }
}

@media screen and (max-width: 60em) {
  .holy-grail-middle {
    -ms-grid-row: 3;
        grid-row-start: 3;
    -ms-grid-column: 1;
        grid-column-start: 1;
    grid-column-end: 4;
  }
}

@media screen and (max-width: 60em) {
  .right-nav {
    -ms-grid-row: 4;
        grid-row-start: 4;
    -ms-grid-column: 1;
        grid-column-start: 1;
    grid-column-end: 4;
  }
}

.holy-grail-footer {
  -ms-grid-column: 1;
      grid-column-start: 1;
  grid-column-end: 4;
}

CSS Grid - Holy Grail Layout

By Christine Siu

Product Card

Vertical Testimonial Block

Portfolio Resume Scrolling Container

CSS Grid - Holy Grail Layout

By Christine Siu

Similar Building Blocks

Product Card

Vertical Testimonial Block

Portfolio Resume Scrolling Container