SaSSy Grids

Responsive grids for your site or app.

Roll your own grid
Columns cols Gutter px
Twelve-column fluid grid HTML CSS SASS
<div class='grid_container'>
    <div class='grid_base_12'>
        <div class='grid_col_12'>
            12
        </div> <!-- /grid_col_12 -->
        <div class='grid_col_6'>
            6
        </div> <!-- /grid_col_6 -->
        <div class='grid_col_6'>
            6
        </div> <!-- /grid_col_6 -->
        <div class='grid_col_4'>
            4
        </div> <!-- /grid_col_4 -->
        <div class='grid_col_4'>
            4
        </div> <!-- /grid_col_4 -->
        <div class='grid_col_4'>
            4
        </div> <!-- /grid_col_4 -->
        <div class='grid_col_3'>
            3
        </div> <!-- /grid_col_3 -->
        <div class='grid_col_3'>
            3
        </div> <!-- /grid_col_3 -->
        <div class='grid_col_3'>
            3
        </div> <!-- /grid_col_3 -->
        <div class='grid_col_3'>
            3
        </div> <!-- /grid_col_3 -->
    </div> <!-- /grid_base_12 -->
</div> <!-- /grid_container -->
/* -----------------------------
   Clearfix
   ----------------------------- */
.clearfix, .grid_base_12, .grid_container {
  zoom: 1;
}
.clearfix:before, .grid_base_12:before, .grid_container:before, .clearfix:after, .grid_base_12:after, .grid_container:after {
  content: " ";
  display: table;
}
.clearfix:after, .grid_base_12:after, .grid_container:after {
  clear: both;
}

/* -----------------------------
   Sassy Grid mixin
   @author: Frej Raahede Nielsen
   @documentation: http://springload.github.com/sassy-grid/
   ----------------------------- */
.grid_container {
  max-width: 970px;
}
.ie7 .grid_container, .ie6 .grid_container {
  /* Locking IE6 and IE7 due to sub-pixel rounding issue */
  width: 970px;
}

.grid_base_12 {
  padding-left: 6.7%;
  padding-right: 6.7%;
}

.grid_base_12 .grid_col_1, .grid_base_12 .grid_col_3, .grid_base_12 .grid_col_4, .grid_base_12 .grid_col_6, .grid_base_12 .grid_col_12, .overlay_grid .grid_col_1 {
  margin-left: 1.78%;
  margin-right: 1.78%;
}

.grid_base_12 .grid_col_1, .overlay_grid .grid_col_1 {
  width: 4.76%;
}

.grid_base_12 .grid_col_3 {
  width: 21.42%;
}

.grid_base_12 .grid_col_4 {
  width: 29.76%;
}

.grid_base_12 .grid_col_6 {
  width: 46.42%;
}

.grid_base_12 .grid_col_12 {
  width: 96.42%;
}

/* IE6 fix: fixes double margin on floated elements */
.ie6 .grid_base_12 .grid_col_1, .grid_base_12 .ie6 .grid_col_1, .ie6 .grid_base_12 .grid_col_3, .grid_base_12 .ie6 .grid_col_3, .ie6 .grid_base_12 .grid_col_4, .grid_base_12 .ie6 .grid_col_4, .ie6 .grid_base_12 .grid_col_6, .grid_base_12 .ie6 .grid_col_6, .ie6 .grid_base_12 .grid_col_12, .grid_base_12 .ie6 .grid_col_12, .ie6 .overlay_grid .grid_col_1, .overlay_grid .ie6 .grid_col_1 {
  display: inline;
}

.grid_base_12 .grid_col_1, .grid_base_12 .grid_col_3, .grid_base_12 .grid_col_4, .grid_base_12 .grid_col_6, .grid_base_12 .grid_col_12, .overlay_grid .grid_col_1 {
  float: left;
}
.main .grid_base_12 .grid_col_1, .grid_base_12 .main .grid_col_1, .main .grid_base_12 .grid_col_3, .grid_base_12 .main .grid_col_3, .main .grid_base_12 .grid_col_4, .grid_base_12 .main .grid_col_4, .main .grid_base_12 .grid_col_6, .grid_base_12 .main .grid_col_6, .main .grid_base_12 .grid_col_12, .grid_base_12 .main .grid_col_12, .main .overlay_grid .grid_col_1, .overlay_grid .main .grid_col_1 {
  padding-bottom: 2em;
}

.grid_container {
  margin-left: auto;
  margin-right: auto;
  min-width: 640px;
}

/* ------------------------------------------------------------- *
 * Demo styles
 * ------------------------------------------------------------- */
.grid_base_12 .grid_col_1, .grid_base_12 .grid_col_3, .grid_base_12 .grid_col_4, .grid_base_12 .grid_col_6, .grid_base_12 .grid_col_12, .overlay_grid .grid_col_1 {
  background: #D8E6FF;
  text-align: center;
  line-height: 40px;
  min-height: 40px;
  margin-bottom: 15px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px;
}

.overlay_grid .grid_base_12 {
  height: 100%;
}
.overlay_grid .grid_col_1 {
  background: none;
}
// -------------------------------------------------------------
// Importing grid core and clearfix
// --------------------------------

@import '../../externals/sassy-grid/sass/grid-core';
@import '../../externals/sassy-grid/sass/clearfix';

// -------------------------------------------------------------
// Basic grid settings
// -------------------

$degredation-selector: '.no_media_queries';
$ie6-selector: '.ie6';
$grid-debug: false;

// -------------------------------------------------------------
// Defining the grid
// -----------------

@include define-grid-settings(
    $grid-name: 'demo-grid',
    $is-fluid: true,
    $column-width: 40,
    $gutter-width: 30,
    $gutter-property: 'margin',
    $num-columns: 12,
    $padding-left: 80,
    $padding-right: 80
);

// -------------------------------------------------------------
// Applying the grid
// -----------------

@include apply-grid(
    $use-grid: 'demo-grid',
    $container-selector: '.grid_container',
    $row-selector: '.grid_base_12',
    $row-extend-selectors: '%grid_row',
    $column-selector-prefix: '.grid_col_',
    $column-extend-selectors: '%grid_col',
    $output-column-styles-for: 1 3 4 6 12
);

// -------------------------------------------------------------
// Basic grid styles
// -----------------

%grid_row{
    @include clearfix;
}

%grid_col {
    float: left;
    .main &{
        padding-bottom: 2em;
    }
}

.grid_container{
    @include clearfix;
    margin-left: auto;
    margin-right: auto;
    min-width: 640px;
}

/* ------------------------------------------------------------- *
 * Demo styles
 * ------------------------------------------------------------- */

%grid_col{
    background: #D8E6FF;
    text-align: center;
    line-height: 40px;
    min-height: 40px;
    margin-bottom: 15px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
}

.overlay_grid{
    .grid_base_12{
        height: 100%;
    }
    .grid_col_1{
        @extend %grid_col;
        @include span-columns( $columns: 1, $grid-name: 'demo-grid' );
        background: none;
    }
}
12
6
6
4
4
4
3
3
3
3

1. Grab the code

Get the SaSS project from the repo:

https://github.com/springload/sassy-grid.git

2. Define your grid

Here's a 12 column fluid grid to get you started.

// -------------------------------------------------------------
// Importing grid core and clearfix
// --------------------------------

@import '../../externals/sassy-grid/sass/grid-core';
@import '../../externals/sassy-grid/sass/clearfix';

// -------------------------------------------------------------
// Basic grid settings
// -------------------

$degredation-selector: '.no_media_queries';
$ie6-selector: '.ie6';
$grid-debug: false;

// -------------------------------------------------------------
// Defining the grid
// -----------------

@include define-grid-settings(
    $grid-name: 'demo-grid',
    $is-fluid: true,
    $column-width: 40,
    $gutter-width: 30,
    $gutter-property: 'margin',
    $num-columns: 12,
    $padding-left: 80,
    $padding-right: 80
);

// -------------------------------------------------------------
// Applying the grid
// -----------------

@include apply-grid(
    $use-grid: 'demo-grid',
    $container-selector: '.grid_container',
    $row-selector: '.grid_base_12',
    $row-extend-selectors: '%grid_row',
    $column-selector-prefix: '.grid_col_',
    $column-extend-selectors: '%grid_col',
    $output-column-styles-for: 1 3 4 6 12
);

// -------------------------------------------------------------
// Basic grid styles
// -----------------

%grid_row{
    @include clearfix;
}

%grid_col {
    float: left;
    .main &{
        padding-bottom: 2em;
    }
}

.grid_container{
    @include clearfix;
    margin-left: auto;
    margin-right: auto;
    min-width: 640px;
}

/* ------------------------------------------------------------- *
 * Demo styles
 * ------------------------------------------------------------- */

%grid_col{
    background: #D8E6FF;
    text-align: center;
    line-height: 40px;
    min-height: 40px;
    margin-bottom: 15px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
}

.overlay_grid{
    .grid_base_12{
        height: 100%;
    }
    .grid_col_1{
        @extend %grid_col;
        @include span-columns( $columns: 1, $grid-name: 'demo-grid' );
        background: none;
    }
}

3. Markup some HTML

<div class='grid_container'>
    <div class='grid_base_12'>
        <div class='grid_col_12'>
            12
        </div> <!-- /grid_col_12 -->
        <div class='grid_col_6'>
            6
        </div> <!-- /grid_col_6 -->
        <div class='grid_col_6'>
            6
        </div> <!-- /grid_col_6 -->
        <div class='grid_col_4'>
            4
        </div> <!-- /grid_col_4 -->
        <div class='grid_col_4'>
            4
        </div> <!-- /grid_col_4 -->
        <div class='grid_col_4'>
            4
        </div> <!-- /grid_col_4 -->
        <div class='grid_col_3'>
            3
        </div> <!-- /grid_col_3 -->
        <div class='grid_col_3'>
            3
        </div> <!-- /grid_col_3 -->
        <div class='grid_col_3'>
            3
        </div> <!-- /grid_col_3 -->
        <div class='grid_col_3'>
            3
        </div> <!-- /grid_col_3 -->
    </div> <!-- /grid_base_12 -->
</div> <!-- /grid_container -->

4. Enjoy with a SaSSy friend

12
6
6
4
4
4
3
3
3
3

Demos

Embedded grid

How to embed one grid in another without loosing alignment. How to embed one grid in another without loosing alignment.

Custom names

How to customize the selectors for container, rows and columns in a grid. How to customize the selectors for container, rows and columns in a grid.

Breakout

Breaking a columm-level element out to the borders of the grid. Breaking a columm-level element out to the borders of the grid.

Break columns

Columns breaking to span a different column amount on @media breakpoints. Columns breaking to span a different column amount on @media breakpoints.

Fitting blocks

Content blocks that change width to fit the window. Based on a 60 column grid to cater for 5, 4, 3, 2 and 1 columns. Content blocks that change width to fit the window. Based on a 60 column grid to cater for 5, 4, 3, 2 and 1 columns.

Static grid

Simple 12 column static grid. Simple 12 column static grid.

Fluid grid

12 column fluid grid with a minimum width set. 12 column fluid grid with a minimum width set.