Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Simple, fluid, nestable, flexible, Sass-based, responsive grid system.

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.


Simple, fluid, nestable, flexible, Sass-based, responsive grid system.

  • Fully responsive
  • Mobile first
  • Infinitely nestable
  • Reversible/reorderable
  • With/without gutters
  • Endless possible combinations
  • Simple to understand, human-friendly classes
  • Option to keep classes out of your HTML
  • Robust
  • Simple
  • No .clear or .last classes
  • It just works

Please see Responsive grid systems; a solution? for a comprehensive overview of the principles of the grid system.



Simply fill in/adjust the relevant variables.

  • $responsive is used to turn csswizardry-grids’ responsive features on and off. csswizardry-grids is designed primarily for responsive builds but can also be used on non-responsive projects just as easily. Setting this to false will simply prevent Sass generating your palm etc modifiers.
  • $gutter controls how much space there is between columns.
  • $mobile-first controls whether you would like unclassed grid items to initially adopt `width:100%;. This means that you won’t need to add a class to force a grid item to take up the full width of its container.
  • $use-silent-classes tells csswizardry-grids whether to go ahead and compile solid, traditional classes (e.g. .one-whole) or to create Sass ‘silent’ classes which only compile to CSS once explictly called.
  • $lap-start and $desk-start tell csswizardry-grids when to fire particular media queries to service those particular sizes. Note that csswizardry-grids works out the ends of any other breakpoints by using these numbers.

Basic usage

If you are using traditional classes then an example, basic usage might look like this:

<div class="grid">

    <div class="grid__item  lap-one-half  desk-two-thirds">

 --><div class="grid__item  lap-one-half  desk-one-third">


If you are using silent classes then your HTML might look like this:

<div class="page">

    <div class="content">

 --><div class="sub-content">


Note the empty HTML comments. These are to remove whitespace caused by using inline-block. Prior to v1.1 this was tackled by using some [letter|word]-spacing trickery, however Chrome 25 introduced a change which meant this method now broke csswizardry-grids.

…and your Sass, something like this:

    @extend %grid;

        @extend %grid__item;
        @extend %one-whole;
        @extend %lap-one-half;

        @extend %desk-two-thirds;

        @extend %desk-one-third;
Something went wrong with that request. Please try again.