Bring Your Grid to Yoga Class

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 and book on responsive design, I was convinced to try it again. I thought that I could amend the grid-width function already in 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.

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.

// 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:

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.

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.

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