Just Another Sassy Grid

There are a LOT of grid systems out there. I’ve used and abused quite a few of them, but have always found them to be too verbose or too limited or just a PITA to use. In the past I think the only system I used for more than a single project was Chris Coyier’s Don’t Overthink It Grids. I liked its simplicity.

Since I started using the Genesis Framework I’ve been using the grid that’s included in the sample theme. It’s simple and it works for most situations if you use vanilla CSS and don’t mind doing the math when you need to make changes.

TL;DR
Just show me the friggin grid!

Enter Sass

One of the first things I did when I started working with Genesis was to Sassify the Sample theme’s css. I like to use Sass variables and mixins for colors, fonts and other globular things so I thought I would make life a bit easier and add a little Sass to the grid.

Among these variables, I typically set $pad and $base-container-width variables (using rem, em, px, whatever as long as the units match) in a master vars.scss file to be used throughout the project.

$pad: 2rem;
$base-container-width: 100rem;

I like the grid padding to be proportionate to the rest of the site so I created a $gridpad variable as well and use a little math to convert the units and set the column widths and margins.

$gridpad: ( $pad / $base-container-width ) * 100%;

// COLUMNS
.one-fourth     { width: (100/4 + $gridpad/4) - $gridpad; }
.two-fourths    { width: ((100/4 + $gridpad/4) * 2) - $gridpad; }
.three-fourths  { width: ((100/4 + $gridpad/4) * 3) - $gridpad; }

Which in this case compiles to:

$gridpad: 2%;

// COLUMNS
.one-fourth    { width: 23.5%; }
.two-fourths   { width: 49%; }
.three-fourths { width: 74.5%; }

Now all I have to do is set the $pad and $base-container-width and Sass will get all Sassy and do the rest for me. Compiled column widths and margins will be nice and squishy percents.

I’ve also added a .flow-reverse class for right to left column flow and a .row class for uh, rows.

I could expand on this further but I haven’t found the need to yet. Occasionally I’ll need to use an oddball column size. In those cases I just set the widths using the grid’s formula:

.one-seventh { width: (100%/7 + $gridpad/7) - $gridpad; }
.six-sevenths { width: ((100/7 + $gridpad/7) * 6) - $gridpad; }

Add it all up and you get a nice little grid that I’ve found to be pretty flexible so far. Take it for a spin and make it your own. It’s based on Genesis’ Content Column Classes so the markup should be the same except for the add-ons.