IE 7 and lower are not officially supported. In version 3+, IE support is not included by default. If you wish to use it, uncomment the final section of smart-grid.scss and recompile.

Built to Scale

CSS Smart Grid version 3 was completely rebuilt from the ground up to use percentage-based flexible columns and gutters. When the browser is at least 960 pixels wide, columns will be 60 pixels wide with 20 pixel gutters. Browsers from 481-959 pixels wide will scale to fit while smaller screens get full width columns. If you want to support larger layouts, its as simple as changing one variable.

This page uses CSS Smart Grid; resize your browser to see it in action.

Not Just Mobile Friendly, But Mobile First

On mobile devices every kilobyte of bandwidth and every CPU cycle used to render a page counts. With that in mind, CSS Smart Grid uses mobile as its default layout. Mobile browsers that don't understand @media queries aren't left in the dust, they are first-class citizens. And because there's no need for polyfills on older browsers, even feature phone handsets will receive a single column view.

SASS Support

Version 4 drops support for LESS in favor of SASS. This gives you ultimate flexibility in how you choose to use the system. You can simply include the minified CSS file in your project or use the core components as mixins for your custom styles.

How to Use It

As a Grid System

There's only one CSS file to include: smart-grid.css. Place that in <head>before your own stylesheet.

Wrap your page inside a <div class="container">. Note that you can use more than one container if your need calls for it:

Column Markup

Grid columns are achieved by adding a column class to any element. By default, anything with the column class is one column wide. For wider columns, add a class matching the number of columns you want the element to be: two, four, etc. Additionally, there are several shorthand classes for common use cases: one-fourth, three-fourths, one-third, two-thirds, and one-half. Group rows of columns together under a parent element with the class row to make sure all of the floats are cleared.

<divclass="container"><divclass="row"><articleid="main"role="main"class="columns two-thirds"><p>The beginning of the best article in the history of humanity.</p></article><asideid="sidebar"role="complementary"class="columns four"><p>Here is some additional information.</p></aside></div><!-- end .row --></div><!-- end .container -->

If you only have one row of columns in a container, you can ommit the row:

<divclass="container"><articleid="main"role="main"class="columns two-thirds"><p>The beginning of the best article in the history of humanity.</p></article><asideid="sidebar"role="complementary"class="columns four"><p>Here is some additional information.</p></aside></div><!-- end .container -->

Column Offsets

Sometimes you need a blank column between content. Rather than add superfluous markup, you can add one of the offset-xxxxx classes to the element you want to push left. There are classes defined to offset anywhere from 1 (offset-one) to 11 (offset-eleven) columns. Note that the offsets work by padding the element they're placed on; if you change the padding in your own CSS, the offsets will not work. Just like their column counterparts, offsets only take effect in browsers that are at least 768 pixels wide.

<divclass="container row"><divclass="columns two offset-two"><p>There are two blank columns to the left of this one.</p></div><!-- end .two --><divclass="columns seven offset-one"><p>This column leaves one column empty between it and it's predecessor then takes up the rest of the row.</p></div><!-- end .seven --></div><!-- end .container -->

You can mix and match columns and offsets however you want as long as the offset and column numbers add up to 12. To see it all working together, view the demo.

As SASS mixins

We all know that semantic markup is best; using the Smart Grid as SASS mixins allows you to forgo adding additional classes to your markup. The Smart Grid provides three core mixins: .column() which handles the default rules like floating and margins, .columns(number) which sets the width based on the number you pass in, and .offset(number) which adds a margin-based offset to the element.

SASS Example

Note that you'll still need to clear floats on the parent element. You can either @import "smart-grid-containers"; into your file and use the .container and .row classes in your markup or use any float-clearing method of your choice.