Fluid Grid

fixed.css

#container {
  width: 960px;
  margin: 0 auto;
}

[role="main"] {
  width: auto;
  margin: 0 0;
}

header, footer {
  margin: 0 10px;
  border: 1px solid black;
  margin-bottom: 20px;
}

#left-column, #right-column {
  margin: 0 10px;
  float: left;
  width: 218px;
  border: 1px solid red;
}

#main-column {
  margin: 0 10px;
  float: left;
  width: 700px;
}
#main-column > section {
  width: auto;
  margin: 0 -10px;
  margin-bottom: 20px;
}
#main-column > section.hero {
  border: 1px solid black;
  margin-left: 0;
  margin-right: 0;
}

#content {
  margin: 0 10px;
  float: left;
  width: 458px;
  border: 1px solid blue;
}

.clearfix, #container, [role="main"], #main-column > section {
  *zoom: 1;
}
.clearfix:after, #container:after, [role="main"]:after, #main-column > section:after {
  content: "";
  display: table;
  clear: both;
}

fixed.scss

$grid-clearfix-class: false;

// import the grid
@import "grid";

// establishes page width and centers
#container {
  @include grid-page;
}

// main page sections
[role="main"] {
  @include grid-row(true); //true indicates a row is directly inside a page
}

// header and footer don't have columns in this example
header, footer {
  margin: 0 $grid-gutter-width/2; // margins, like full-width columns
  border: 1px solid black;
  margin-bottom: $grid-gutter-width;
}

// side columns
#left-column, #right-column {
  @include grid-column(3, -2px); //3 columns wide, adjust for border
  border: 1px solid red;
}

// main column
#main-column {
  @include grid-column(9); //9 columns wide
  
  // sections in the main column are rows
  > section {
    @include grid-row;
    margin-bottom: $grid-gutter-width;
  }

  // hero sections don't have columns in this example
  > section.hero {
    border: 1px solid black;
    margin-left: 0; // remove the right and left margins because this isn't a row
    margin-right: 0;
  }
}

// center column
#content {
  @include grid-column(6, -2px); //6 columns wide, adjust for border
  border: 1px solid blue;
}

.clearfix { @include pie-clearfix; }

fluid.css

#container {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}

[role="main"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: auto;
  margin: 0 0;
}

header, footer {
  margin: 0 1.0416667%;
  border: 1px solid black;
  margin-bottom: 20px;
}

.column, #left-column, #right-column, #main-column, #content {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
}

#left-column, #right-column {
  border: 1px solid red;
}

#left-column {
  width: 22.9166667%;
  margin: 0 1.0416667%;
}

#right-column {
  width: 30.5555556%;
  margin: 0 1.3888889%;
}

#main-column {
  width: 72.9166667%;
  margin: 0 1.0416667%;
}
#main-column > section {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: auto;
  margin: 0 -1.4285714%;
  margin-bottom: 20px;
}
#main-column > section.hero {
  border: 1px solid black;
  margin-left: 0;
  margin-right: 0;
}

#content {
  width: 63.8888889%;
  margin: 0 1.3888889%;
  border: 1px solid blue;
}

.clearfix, #container, [role="main"], #main-column > section {
  *zoom: 1;
}
.clearfix:after, #container:after, [role="main"]:after, #main-column > section:after {
  content: "";
  display: table;
  clear: both;
}

fluid.scss

$grid-clearfix-class: false; // don't auto create the clearfix

// import the grid
@import "grid/fluid";

// establishes page width and centers
#container {
  @include fluid-page;
}

// main page sections
[role="main"] {
  @include fluid-row(true); // row is directly inside a page
}

// header and footer don't have columns in this example
header, footer {
  @include fluid-gutters; // gutters, like full-width columns
  border: 1px solid black;
  margin-bottom: $grid-gutter-width;
}

// column rules so that float and border-box aren't repeated
.column {
  @include fluid-column($with-gutters: false); // omit gutters
}

// side columns
#left-column, #right-column {
  @extend .column;
  border: 1px solid red;
}
#left-column {
  @include fluid(3); //3 columns wide, don't adjust for border
  @include fluid-gutters; // gutters
}
#right-column {
  @include fluid(3, 0, 9); //3 columns wide, 9 column parent, don't adjust for border
  @include fluid-gutters(9); // gutters in a 9 column parent
}

// main column
#main-column {
  @extend .column;
  @include fluid(9); //9 columns wide
  @include fluid-gutters; // gutters
  
  // sections in the main column are rows
  > section {
    @include fluid-row(false, 9);
    margin-bottom: $grid-gutter-width;
  }

  // hero sections don't have columns in this example
  > section.hero {
    border: 1px solid black;
    margin-left: 0; // remove the right and left margins because this isn't a row
    margin-right: 0;
  }
}

// center column
#content {
  @extend .column;
  @include fluid(6, 0, 9); //6 columns wide, don't adjust for border
  @include fluid-gutters(9); // gutters
  border: 1px solid blue;
}

// define our own clearfix
.clearfix { @include pie-clearfix; }

layout.html

  ...
  <div id="container">
    <header>
        <h1>Header</h1>
        <nav><a href="#">Nav Link</a></nav>
    </header>
    <div role="main">
      <div id="left-column">Left Column</div>
      <div id="main-column">
        <section class="hero">
          Hero Space, I take the full width
        </section>
        <section>
          <article id="content">Actual Content</article>
          <aside id="right-column">Right Column</aside>
        </section>
      </div>
    </div>
    <footer>
      <p>&copy; Copyright 2011</p>
    </footer>
  </div>
  ...