FLUID GRID COLUMN GENERATOR

Fluid-Grid-SassMeister-input.sass

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

////////////////////////////////////////////////////
// FLUID GRID COLUMNS
///////////////////////////////////////////////////
$cols: 1
$grid-rows: 5
$padding: 1%
$class-name: views-row
 
=grid-mobile($class-name: views-row)
  .#{$class-name}
    float: left
    clear: both
 
=grid-desktop($class-name: views-row)
  .#{$class-name}
    float: left
    clear: none
 
=alpha
  padding-left: 0
 
=omega
  padding-right: 0
 
=fluid-grid($cols: 1, $grid-rows: 5, $padding: 1%, $class-name: views-row)
  .#{$class-name}
    width: 100% / $cols
    padding: 0% + $padding
    // use toolkit box-sizing mixin
    box-sizing: border-box 
  @for $x from 1 through $grid-rows
    .#{$class-name}-#{$x * $cols}
      +omega
      clear: both
  @for $x from 1 through $grid-rows
    .#{$class-name}-#{$x * $cols - ($cols - 1)}
      +alpha


// When using the fluid grid mixin, plug in the following variables:
// the number of columns
// the number of rows (if you are unsure guess and add 1 or 2)
// the padding for the left & right edge of each row
// and the name of the class for the rows themselves. 

// Use the grid-mobile mixin for mobile, and then add a breakpoint
// and use the grid-desktop mixin for columns 2 and up.

// =================================================================  
// EXAMPLE 1
.view-foobar
  +grid-mobile
 
.desktop-size //use breakpoint mixin
  .view-foobar
    +grid-desktop
    +fluid-grid(5)
 
// EXAMPLE 2
// the default class name is "views-row" but you may replace
// that with the last variable.

.container-x
  +grid-desktop
  +fluid-grid(4, 2, $class-name: panel-pane)


// If you don't have a way to generate incrementally numbered classes 
// on your items, you can also use a js generated data attribute to 
// accomplish the same thing:

=data-grid($cols: 1, $grid-rows: 5, $padding: 1%, $class-name: views-row)
  .#{$class-name}
    width: 100% / $cols
    padding: 0% + $padding
    // use toolkit box-sizing mixin
    box-sizing: border-box 
  @for $x from 1 through $grid-rows
    &[#{$data-name}=#{$x * $cols}
      +omega
      clear: both
  @for $x from 1 through $grid-rows
    &[#{$data-name}=#{$x * $cols - ($cols - 1)}
      +alpha

Fluid-Grid-SassMeister-output.css

.view-foobar .views-row {
  clear: both;
  list-style-type: none;
}
.view-foobar .views-row {
  width: 100%;
  padding: 1%;
  box-sizing: border-box;
}
.view-foobar .views-row-1 {
  padding-right: 0;
  clear: both;
}
.view-foobar .views-row-2 {
  padding-right: 0;
  clear: both;
}
.view-foobar .views-row-3 {
  padding-right: 0;
  clear: both;
}
.view-foobar .views-row-4 {
  padding-right: 0;
  clear: both;
}
.view-foobar .views-row-5 {
  padding-right: 0;
  clear: both;
}
.view-foobar .views-row-1 {
  padding-left: 0;
}
.view-foobar .views-row-2 {
  padding-left: 0;
}
.view-foobar .views-row-3 {
  padding-left: 0;
}
.view-foobar .views-row-4 {
  padding-left: 0;
}
.view-foobar .views-row-5 {
  padding-left: 0;
}

.desktop-size .view-foobar .views-row {
  float: left;
  clear: none;
}
.desktop-size .view-foobar .views-row {
  width: 20%;
  padding: 1%;
  box-sizing: border-box;
}
.desktop-size .view-foobar .views-row-5 {
  padding-right: 0;
  clear: both;
}
.desktop-size .view-foobar .views-row-10 {
  padding-right: 0;
  clear: both;
}
.desktop-size .view-foobar .views-row-15 {
  padding-right: 0;
  clear: both;
}
.desktop-size .view-foobar .views-row-20 {
  padding-right: 0;
  clear: both;
}
.desktop-size .view-foobar .views-row-25 {
  padding-right: 0;
  clear: both;
}
.desktop-size .view-foobar .views-row-1 {
  padding-left: 0;
}
.desktop-size .view-foobar .views-row-6 {
  padding-left: 0;
}
.desktop-size .view-foobar .views-row-11 {
  padding-left: 0;
}
.desktop-size .view-foobar .views-row-16 {
  padding-left: 0;
}
.desktop-size .view-foobar .views-row-21 {
  padding-left: 0;
}

.container-x .views-row {
  float: left;
  clear: none;
}
.container-x .panel-pane {
  width: 25%;
  padding: 1%;
  box-sizing: border-box;
}
.container-x .panel-pane-4 {
  padding-right: 0;
  clear: both;
}
.container-x .panel-pane-8 {
  padding-right: 0;
  clear: both;
}
.container-x .panel-pane-1 {
  padding-left: 0;
}
.container-x .panel-pane-5 {
  padding-left: 0;
}

SassMeister-output.css

.view-foobar .views-row {
  float: left;
  clear: both;
}

.desktop-size .view-foobar .views-row {
  float: left;
  clear: none;
}
.desktop-size .view-foobar .views-row {
  width: 20%;
  padding: 1%;
  box-sizing: border-box;
}
.desktop-size .view-foobar .views-row-5 {
  padding-right: 0;
  clear: both;
}
.desktop-size .view-foobar .views-row-10 {
  padding-right: 0;
  clear: both;
}
.desktop-size .view-foobar .views-row-15 {
  padding-right: 0;
  clear: both;
}
.desktop-size .view-foobar .views-row-20 {
  padding-right: 0;
  clear: both;
}
.desktop-size .view-foobar .views-row-25 {
  padding-right: 0;
  clear: both;
}
.desktop-size .view-foobar .views-row-1 {
  padding-left: 0;
}
.desktop-size .view-foobar .views-row-6 {
  padding-left: 0;
}
.desktop-size .view-foobar .views-row-11 {
  padding-left: 0;
}
.desktop-size .view-foobar .views-row-16 {
  padding-left: 0;
}
.desktop-size .view-foobar .views-row-21 {
  padding-left: 0;
}

.container-x .views-row {
  float: left;
  clear: none;
}
.container-x .panel-pane {
  width: 25%;
  padding: 1%;
  box-sizing: border-box;
}
.container-x .panel-pane-4 {
  padding-right: 0;
  clear: both;
}
.container-x .panel-pane-8 {
  padding-right: 0;
  clear: both;
}
.container-x .panel-pane-1 {
  padding-left: 0;
}
.container-x .panel-pane-5 {
  padding-left: 0;
}