There was a time when creating and managing a holy grail layout used to be a pain in the head. We used to hack the layout a lot back then.

Floats and tables used to be all over the place, and all that just to get a working layout with equal-height columns.

It seems too much now, as you don’t really need that much stuff for a multi-column holy grail layout today.

This guide shows how you can create a multi-column holy grail layout with Flexbox module in CSS. That too without changing the source order in the markup; with no overflowing, no scrollbars whatsoever.

Bonus point is that it’s way more simpler and sane than the earlier hacky stuff people know from the history of Web design. Here is the sneak-peek for the lazy.

Holy Grail layouts in Web design

As a front-end developer, you might already be aware of this term. Web designers often use holy grail when referring to multi-column layouts.

Beginners always find it difficult to do layouts more than two equal-heighted columns. But if you know flexbox, you don’t need to worry about the alignment and heights.

Someone argued about calling a masonry layout one kind of holy grail layouts. Well, a masonry grid may not appear as a holy grail layout in general, but you can made into one if you want. But that’s for another story.

The Flexbox Holy Grail layout Idea

Flexbox allows you to control the alignment of the columns by adding only a few CSS properties. We are going to use the max-width to control the width of the layout columns, and it’s nothing more than that!

You may create as many columns as you want with this technique. But to keep things simple, let’s say we want to do a 3-column layout, we’ll be performing simple mathematics to allot the max-width to the 3 columns.

  • If you want all columns to be equal in width, you’ll set it to 33.33333% (33.33333*3 = 100)
  • If you want a wider column, and the other two equal in width: you might use 60%for the wider, and 20% for the other two columns. (60 + 20*2 = 100)

Not comfortable with the flexbox? I recommend reading this guide first.

Markup

As you can see below, ours is a 3-column layout with two sidebars and the other column acts as the main content.

<div class="layout-3col">
  ...
  <div class"main">
    <div class"content">
    ...
    </div><!--.content-->

    <div class"sidebar sidebar-1">
    ...
    </div><!--.sidebar-1-->

    <div class"sidebar sidebar-2">
    ...
    </div><!--.sidebar-2-->
  </div><!--.main-->
  ...
</div><!--.layout-3col-->

CSS

Markup was simple, so is the CSS.

Here is the basic CSS (Sass actually) to add some shape to the columns of a 3-column layout. You may add media queries as well, as and when required based on the need of your project:

/* Column-wrapper */
.main {
  display: flex;
  justify-content: space-between;
}

/* Columns */
.content,
.sidebar {
  flex: 1 0 auto;
}

/* Layout-wrapper */
.layout-3col {
  .content {
    max-width: 60%;
  }
  .sidebar {
    max-width: 20%;
  }
}

Take a note that you have to provide the flex property to the columns individually (i.e. .content, .sidebar). The flex property provides values to three flexbox properties at once. Those three properties are flex-grow, flex-shrink, and flex-basis.

If you notice the above code block, we set flex to 1 0 auto for the columns in the above CSS code snippet. Here is some quick explanation for that setting:

  1. We want the columns to grow uniformly and equally (flex-grow)
  2. We don’t want the columns to shrink (flex-shrink)
  3. We want columns to have automatic basis or width (flex-basis). We can control this width later on with max-width.

About the order

Say you want to shift the sidebar to the left, and want the content area to act as the column at the centre. Don’t worry, you don’t need to change the source order in the HTML. Take advantage of the order property, and you are all set!

.sidebar--left {
  order: -1;
}

It is obvious that you’ll need to add this class in the HTML to the .sidebar element whichever you want to shift to the left.

Live Demo the Layout

And that’s about it guys. Thoughts are always welcome, I hope you enjoyed being here. If you found this useful, give it a thumbs up by sharing with the other creators.

Read further