How to Use Flexbox for the Elusive CSS Column Layout

It might feel impossible but don’t let CSS defeat you.

Screenshot by author

Learning to style pages can be super confusing at first. There are a lot of options for alternatives to vanilla CSS such as Bootstrap, Bulma, and Tailwind. I didn’t feel comfortable using these frameworks until I better understood how the original works.

This three column layout has been called the “Holy Grail.” Facebook and Twitter both use it. Now you can learn to implement it on your own site!

The first thing we’re going to do is set up the framework for our layout. We need to have a “block” that represents our future navigation bar, another block for our footer, and finally three blocks inside of a container for our main content and side bars.

<div class="wrapper">

  <div class="nav">Navbar</div>

  <div class="body-container">

    <div class="sidebar-left">
      Left Sidebar
    </div>

    <div class="main">
      Main Body
    </div>

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

  </div>

  <div class="footer">Footer</div>

</div>

Now, this doesn’t look very impressive at all, does it?

Not yet, anyway. We’ve got to use CSS to tell the browser how we want the content laid out.