SASS Tutorial

Gettin’ Gridy with Grid Mixins

Posted on by

Let’s get “gridy”. I’ve seen countless SASS mixins to make your life easier when dealing with grids, but I have an issue with most of these mixins I come across. Most of them work great, as they should, but the code can get quite complex and very hard for someone completely foreign to the code to just jump right in to it.

I propose that we use the power of SASS more responsibly and write code that others can easily follow and implement into their projects without any headaches. Now, that doesn’t mean you can’t still produce some awesome, useful code. I’m just suggesting that during your approach, identify a single problem and tackle it. Don’t try to tackle a whole slew of issues with one big, complex chunk of code. Sure, you might think it’s super simple and  it’s easy to understand, you wrote it after all, but someone else who has never seen the code in their life needs to be able to come in and use and understand this, and understand it quickly.

Before I dive in any deeper, I’d like to thank Martin Duran in playing a big role in developing this code. If you have a chance, check him out on CodePen, he’s an active user and puts out some really cool work.

What’s Frustrating about Grids

I don’t think grids need to be complicated, but are commonly over-thought, or intimidating to some. If you haven’t already, I would highly recommend checking out Chris Coyier’s article, Don’t Overthink it Grids. Although the code I’ll be using for this grid will output slightly different code, he does a great job on demonstrating that grids don’t have to be hard or scary.

That being said, what I find most frustrating about grids is doing the calculations. If you’re as bad at math as I am, I’m sure you have a similar feeling. If you have gutters in your grid, you have to recalculate the widths of your grid, and if they ever change, you have to recalculate and it just gets frustrating and annoying.

With the power of Sass, we no longer have to do that and can create robust, modular grid systems with very minimal code and most importantly, NO MATH. Yay!

The Solution

So, we’ve identified a well known problem in developing grids in that it can be quite a pain and time consuming to be updating width and gutter percentages. What I’ve helped come up with is an easy-to-use solution to this, in creating a Sass mixin that will spit out a grid for you by defining the amount of columns you want, and your gutter width. That’s all you need.

Let’s take a peek at the mixin:
**Note: I’ve commented the code quite heavily to explain what each part is doing

SCSS


/*
* $count = column count
* $gutter = gutter width percentage (if $gridWidth is defined, switches to pixels)
* $gridWidth = grid width (optional)
*/

@mixin gridify($count,$gutter,$gridWidth:""){ 

  // calculates single grid item width
  $oneGridItemWidth: 100 / $count; 

  //determines width of gutter if $gridWidth is defined
  @if ($gridWidth != "") {
    $gutter: ($gutter / $gridWidth) * 100;
  }

  //calculates excess margin equally to the column count
  $extra: $gutter / $count;
  .grid {
    //puts grid with to px if $gridWidth is defined
    @if ($gridWidth != "") {
      width: unquote($gridWidth + 'px');
    }   
    overflow: hidden;
  }
  .grid-item {
    float: left;
    box-sizing: border-box;
  }

  //adds gutter and converts px gutters to % if $gridWidth is defined
  .grid-item + .grid-item { margin-left: unquote($gutter + '%'); }

  //The loop that creates all of your grid item classes and widths
  @for $i from 1 through $count {
    .grid-item_#{$i}of#{$count} {
      width: unquote(($oneGridItemWidth * $i) - $gutter + ($extra * $i) + '%');
    }
  }
}

Usage

We have our new awesome mixin in place, let’s put it to work. There are two different ways you can use this mixin. As you can see from the code above, there is an optional variable to define your grid width using a pixel value in case you need to define that for whatever reason. There is a slightly different use case if you opt to define a pixel width for your grid.

Default Usage
By default, the grid will be 100% width, and all you need to do is do a Sass include and define your column count and your gutter width. When using this method, your gutters will be calculated by percentage.

SCSS


@include gridify(12,2); //column count, gutter, optional grid width

Usage when defining a width (pixel mode)
So you’ve decided your grid needs a set pixel value. All you’ll need to do is define that third optional variable of how many pixels you would like the width. Here’s the important part, once the pixel width is defined, you’ve now activated the mixin to function using pixels instead of percentages. This just means that your gutters will now be defined by a pixel value as well instead of a percentage. So your Sass include will look more like this…

SCSS


@include gridify(12,15,960); //column count, gutter, optional grid width

The Output

After using this, you can’t really see what the code for your grid looks like. Below is what your code will look like once it is compiled. This particular code is for a 12 column grid with 1.5% width gutters.

CSS


.grid {
  overflow: hidden;
}

.grid-item {
  float: left;
  box-sizing: border-box;
}

.grid-item + .grid-item {
  margin-left: 1.5%;
}

.grid-item_1of12 {
  width: 6.95833%;
}

.grid-item_2of12 {
  width: 15.41667%;
}

.grid-item_3of12 {
  width: 23.875%;
}

.grid-item_4of12 {
  width: 32.33333%;
}

.grid-item_5of12 {
  width: 40.79167%;
}

.grid-item_6of12 {
  width: 49.25%;
}

.grid-item_7of12 {
  width: 57.70833%;
}

.grid-item_8of12 {
  width: 66.16667%;
}

.grid-item_9of12 {
  width: 74.625%;
}

.grid-item_10of12 {
  width: 83.08333%;
}

.grid-item_11of12 {
  width: 91.54167%;
}

.grid-item_12of12 {
  width: 100%;
}

Wrap it Up

As you can see above, we have a nice grid module that will work very well for your layouts. There’s no crazy complicated code and you’re given a solid bare bones grid structure and it solves our problem of ever having to spend unwanted time calculating grid widths.

I guess that pretty much wraps up my little rant on creating Sass mixins, usage of this grid mixin and how it was built. As always, suggestions or ideas for extended versions are welcome. Feel free to check out the full demo, fork it, or whatever.

View Full Demo

2 Responses to “Gettin’ Gridy with Grid Mixins”

  1. Anthony Ticknor says:

    Love this! Nice work Jason.

    Call me old fashioned but I still generate my grid via the CLI using https://github.com/sumpygump/css-grid-generator

    • Jason says:

      Thanks! I used it on an actual project today and had my grid setup in less than a minute and loved it.

      That grid generator is pretty cool, I haven’t used that before, I’ll have to give it a try.

Leave a Reply