Click here to Skip to main content
14,980,986 members
Articles / Web Development / HTML
Article
Posted 19 Aug 2018

Tagged as

Stats

371K views
16 bookmarked

Creating Holy Grail Layouts with CSS Grid

Rate me:
Please Sign up or sign in to vote.
4.38/5 (10 votes)
19 Aug 2018CPOL1 min read
This article shows how to use CSS grid to create holy grail layout.

Introduction

The holy grail layout is a layout that consists of fixed width header, footer, left sidebar, right sidebar and fluid hero item as below:

Image 1

Traditionally, it is composed via negative margins technique.

To be honest, this doesn’t communicate much to me and looks more like a bunch of hacks. Luckily display: grid has arrived which allows to build 2-dimensional layout in more semantically meaningful style.

Markup

Let’s define our markup as follows:

HTML
<div class="grid">
  <header>
    Header
  </header>
  
  <aside class="sidebar-left">
    Left Sidebar
  </aside>

  <article>
    Article
  </article>

  <aside class="sidebar-right">
    Right Sidebar
  </aside>

  <footer>
    Footer
  </footer>

</div>

Styles

First, we define that container employs grid layout:

CSS
.grid {
  display: grid;
}

As you might already have noticed, our grid has 3 rows. Let’s make them equal for the sake of simplicity.

CSS
grid-template-rows: repeat(3, 100px);

We use repeat function for that which repeats row specified number of times.

Also we have 3 columns: the first and the last of them are fixed width whereas the middle one occupies all the remaining space.

CSS
grid-template-columns: 150px 1fr 150px;

Here fr is a new unit that indicates a fraction of a free space. Here, middle column consumes one fraction of a free space.

Our complete container styles look as follows:

CSS
.grid {
  display: grid;
  grid-template-columns: 150px 1fr 150px;
  grid-template-rows: repeat(3, 100px);
}

Now we have to make our header and footer span for all 3 available columns:

CSS
header, footer {
  grid-column: 1 / 4;
}

Which is the shorthand for:

CSS
header, footer {
  grid-column-start: 1;
  grid-column-end: 4;
}

Or:

CSS
header, footer {
  grid-column-start: 1;
  grid-column-end: span 3;
}

Which means that header and footer span for 3 columns.

Now we just have to assign grid rows:

CSS
header {
  grid-row: 1;
}

.sidebar-left {
  grid-column: 1;
  grid-row: 2;
}

article {
  overflow: hidden;
  grid-column: 2;
  grid-row: 2;
}

.sidebar-right {
  grid-column: 3;
  grid-row: 2;
}

footer {
  grid-row: 3;
}

Internet Explorer 11 Support

This feature is available for all modern browsers but in case you still have support for Internet Explorer 11, you will require some special prefixes:

CSS
.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 150px 1fr 150px;
      grid-template-columns: 150px 1fr 150px;
  -ms-grid-rows: 100px 100px 100px; //repeat does not work
      grid-template-rows: repeat(3, 100px);
}

And some prefixes for grid-column and grid-row in the following fashion:

CSS
header, footer {
  -ms-grid-column: 1;
      grid-column-start: 1;
  -ms-grid-column-span: 3; //the way to span columns
      grid-column-end: span 3;
}

Conclusion

As you have seen in this article, grid layouts allow us to create 2-dimensional layouts in a more semantically concise way without employing CSS hacks. As they are supported for all modern browsers, they are now de-facto standard for creating 2-dimensional layouts.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Bohdan Stupak
Software Developer
Ukraine Ukraine
https://twitter.com/BohdanStupak1

Comments and Discussions

 
Questionpx? Pin
李立峰19-Aug-18 23:24
Member李立峰19-Aug-18 23:24 
AnswerRe: px? Pin
Bohdan Stupak20-Aug-18 2:58
professionalBohdan Stupak20-Aug-18 2:58 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.