A Simple Grid Mixin Explained

Let’s discuss how to set up a grid from an SCSS development perspective. Using a basic Sass grid mixin, we’ll port the values that your designers can generate with Modular Grid Pattern into code, setting up a simple, semantically-named custom grid that aligns with your site’s design.

Mixins in Sass are reusable chunks of code that accept variables. So, when writing your SCSS (a CSS-style syntax for Sass), you can call a mixin, provide parameters, and your preprocessor will take that code and process it into CSS that the browser can use. Grid mixins are huge timesavers. Once written, you can reuse them as often as you’d like to define the widths of all containers in your design system. Consistent use of a solid grid mixin supports a uniform grid system.

Follow along with this demo, which shows the grid mixin we’ll be working with in action. In the demo, we’ve created a simple two-column layout, with a main content area on the left and a smaller sidebar on the right.

Okay, ready?

First, let’s establish our variables. We’ve named them to match fields in the Modular Grid Pattern app:

$num-of-modules: 14; $module-width: 78px; $gutter: 14px; $layout-width: 1274px;

Above, we state our layout will have 14 columns, with each column being 78px wide. We’ll have 14px-wide gutters, and our total page width will be 1274px wide.

Now that we have our variables in place, we can write our mixin, which pulls in these variables, does some math, and then returns a percentage for us—a necessary component in a flexible grid. We need our widths to be percentage-based so they will scale with the browser across various screen sizes—something hard-coded values can’t do.

Take a look below at the mixin we’ve created:

@mixin grid($col-num, $gutter-num) { width: percentage((($module-width * $col-num)+($gutter * $gutter-num))/$layout-width); }

This may appear to be a bunch of code gobbledygook, so let’s break down what it says.
We created a mixin by writing the @mixin directive; we’ve named it “grid.” We’re leveraging the the parameters $col-num and $gutter-num inside parentheses so we can customize our mixin, telling it just how many columns and gutters we’ll need to make our layout each time we call it.

The above mixin essentially breaks down to container width = (total column width * total gutter width) / page-width. We get the total column width by multiplying the column width by the number of columns, and the total gutter width by multiplying the the width of the gutters by the total number of gutters.

Now that we’ve written our mixin, we can use it as a CSS declaration starting with @include followed by the name of the mixin for our main column, which will comprise of 10 columns and 9 gutters:

.main{ @include grid(10,9); }

which translates to:

width: percentage( [(78*10)+(14*9)]/1090 )

Finally, the percentage operator in Sass converts our math into a percentage for us and gives us our CSS, which will look like this:

.main{ width: 71.1146%; }

We want out main column to sit next to the sidebar in the layout, so let’s add a float to the main container.

.main{ @include grid(10,9); float: left; }

In a responsive grid, gutters should also remain percentage-based, also scaling with the size of the browser. Let’s create a quick percentage-based gutter to keep our layout flexible, again, using the percentage operator and letting our preprocessor do the math for us:

$flex-gutter: percentage($gutter/$max-content-width);

And then we add it to our SCSS code:

.main { @include grid(10,9); float: left; margin-right: $flex-gutter; }

Which will print to:

.main { width: 71.1146%; float: left; margin-right: 1.0989%; }

We’ve used 10 of our 14 columns in this 14 column grid, and 10 of our 13 gutters (9 for the .main container itself, and 1 for the margin which will sit in between the two columns), so we have 4 columns and 3 gutters left for our sidebar. Let’s write our SCSS:

.sub { @include grid(4,3); float: right; }

Which will print to:

.sub { width: 27.7865%; float: right; }

Now our layout, which consists of a main column (.main at a width of 71.1146%), a sidebar (.sub with a width of 27.7865%), and a gutter between the two (a width of 1.0989%) will add up to 100% of the width of the parent container. Everything will line up nicely and scale with the browser.

That’s it! We now have a flexible, SCSS-based, grid-based layout that ports values directly from modulargrid.org. Using our mixin, we can create a variety of layouts. Check out this codepen for examples of just a few additional options, but really, any variety of combinations is possible now that we’ve leveraged our powerful grid mixin.

Happy coding!

Looking to learn how to build a grid from a designer’s perspective? Check out Michael “MJ” Johnson’s recently released course, Basics of Grid, for The Happy Cog Way, then come back and share how you’re transforming your custom grids into code.

Back to Top