The 26 Column Grid

March 4th 2016
3 min read

The 12 column grid has been a staple in my toolbox for years, first with and more recently with bootstrap scaffolding. It has been incredibly helpful and allowed a quick start to many projects. But when I recently sat down to redesign I wanted something that was more balanced.

Imbalance in the traditional 12 column results from margins widths that are independent of column widths. My idea was to control margins with columns so that there was a spatial relationship between both. This would provide horizontal rhythm to all elements on page.

The goal was to achieve the same flexibility and alignment with 1, 2, 3, or 4 columns but with columns and margins all being a multiple of 1. The magic number was 13, that was easy! It allows for each margin to be one column wide and for the content to fit perfectly for 1–4 columns.

The layout with 13 columns that I was after

At first glance this looks great, but I was increasingly hitting the limitations of supporting content blocks that were spaced apart. Spaced apart works great for copy as it supplies ample negative space, but what about when I wanted to adjoin images in a grid? No dice, 13 is prime.

The solution (which seems so obvious now, but took hours of head bashing and sketching) was to split each column for a total of 26. This provides the flexibility to grid graphics and copy in a way that is harmonious.

Copy and graphics harmoniously laid out in 26 columns

Implementing was a snap, I forked the SCSS version of Flexbox Grid, set the number of columns to 26 and margins to 0.

Then I wrote this article and received honest feedback (thank you!) that made me realize there was a lot simpler way to achieve this and, tad-da, it’s a 12 column grid! Talk about full circle. 26 remains a quasi-magic number because each row and column needs to have padding that is (1/26)% wide. You should be able to implement this grid system simply by setting $grid-gutter-width: percentage(1/26); in your bootstrap-sass customizations. note: While it is 12 columns, this will render the 6 & 12 column layouts virtually unusable for copy/content because the padding takes up half or more of the available space.

The final 12 column grid.

Admittedly, the applications of this grid are limited. it works excellent for content-focused sites like blogs and portfolios—I’m very happy with the layout of But you wouldn’t want to build a complex UI with it, working with all the white space would be a nuisance and force awkward alignment.

I'm a product designer making the world more open and connected at Facebook. I'm a designer who constantly attempts, and fails, to write code.

My designs on Dribbble