---
title: Bring Your Grid to Yoga Class
teaser:
tags: design
author: Kyle Fiedler
published_on: 2012-03-13
---

![''](http://media.tumblr.com/tumblr_m0mutsYPeB1qb5ozt.jpg)

I'll have to admit that, for years, I have resisted designing with flexible
(fluid) layout mostly because I didn't want to figure out all the math to make
it work properly. My other problem was that, at certain sizes, the design just
seemed to fall apart. For the longest time I was unconvinced that it was worth
all of the effort that it would take to get the grid working correctly and
looking good.

After reading Ethan Marcotte's
[article](http://www.alistapart.com/articles/fluidgrids/) and
[book](http://www.abookapart.com/products/responsive-web-design) on responsive
design, I was convinced to try it again. I thought that I could amend the
[grid-width](https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_grid-width.scss)
function already in [Bourbon](http://thoughtbot.com/bourbon/) to my needs by
giving the variables percentage value. I was wrong. It didn't handle
sub-containers because the ratio between columns and gutters changes.

I could still use Sass to do the math ( target ÷ container = percentage ). I
gave the grid-width function a makeover to accommodate this and the result is
[flex-grid](https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_flex-grid.scss).

## Getting Started

Start off by declaring a couple variables for the function. `$fg-max-columns` is
the total number of columns in your grid. `$fg-column` and `$fg-gutter` define
the relationship between column and gutter. I use pixels here because it is what
I am most accustomed to.

```scss
// 960 12 column grid
$fg-max-columns: 12;
$fg-column: 60px;
$fg-gutter: 20px;
```

The function takes two values: the number of columns that you want the element
to span and its container column (which defaults to `$fg-max-columns`). This way
the function allows you to nest containers without losing the relationship
between column and gutter. For example:

```scss
body {
  margin: 0 auto;
  max-width: 1400px;
  width: flex-grid(12);

  section {
    float: left;
    width: flex-grid(8); // No second value needed since it's inside the main container

    article {
      float: left;
      width: flex-grid(6, 8); // Since the article is inside the 8 column section
    }

    aside {
      float: left;
      width: flex-grid(2, 8);
    }
  }
}
```

## Gutters

You'll notice the grid doesn't have any gutters yet. They too can take two
arguments, a container column count and gutter width. Container is set to your
default max columns ($fg-max-columns) and gutter is set to `$fg-gutter`, which
you'll almost never need to change.

```scss
section {
  float: left;
  margin-right: flex-gutter();
  width: flex-grid(8);

  article {
    float: left;
    margin-right: flex-gutter();
    width: flex-grid(6, 8);
  }

  aside {
    float: left;
    width: flex-grid(2, 8);
  }
}
```

## The last touch

I add a max-width to my main container, mostly for me because I'm usually
browsing at full screen on a 30" monitor. Since the grid is totally percentage
based, I usually look to where the line-length becomes too long.

```scss
body {
  margin: 0 auto;
  width: flex-grid(12);
  max-width: 1400px;
}
```