Creating Holy Grail Layouts with CSS Flexbox

A simple tutorial guide explaining how to create Holy Grail Layouts aka Multi-column Layouts with Flexbox properties, without changing the source order.

Creating Holy Grail Layouts with CSS Flexbox
See the Demo

There was a time when creating and managing a holy grail layout used to be a pain in the head. CSS floats, clearfix, using tables to create equal-heighted columns—all these hacks to achive just a three-column layout—seems too much today.

In this tutorial guide, we are going to create a multi-column (more than two columns)aka holy grail layout with the help of CSS Flexbox module, and that too without chanding the source order in the markup. Trust me, it’s way more simpler than the earlier hacky stuff people know from the history of Web design.

Holy Grail layouts in Web design

As a front-end developer, you might already be aware of this term. Web designers often use this term when referring to multi-column layouts, layouts with more than two equal-heighted columns in general. Masonry layouts are just the opposite of Holy Grail layouts, as they have many columns with different heights.

The Concept

Flexbox gives you the ability to control the alignment of the columns just by adding/modifying one or two 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!

For beginners: if we want to do a 3-column layout, we’ll be performing simple mathematics here to allot the max-width to the 3 columns. If you are still not comfortable with flexbox, you should read this guide first.

  • 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)

Markup

<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) that gives 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%;
  }
}

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

As you noticed above, we set flex to 1 0 auto for the columns in the above CSS code snippet. It means:

  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/width, which will later be controlled by max-width (flex-basis)

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 center. Don’t worry, you won’t need to change the source order in the HTML. Just take advantage of order property, and you are all set!

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

Obviously, you’ll need to add this class in the HTML to the .sidebar element whichever you want to shift to the left.

And that wraps it up. Thoughts are always welcome, I hope you enjoyed being here. Thank you :)