Standard Grid Demo

Here's the standard 12 column grid. On tablet and mobile device resolutions, the columns collapse to span the full width of the page.

Responsive Grid Demo

The standard 12 column grid can easily adapt to simplified layouts for tablet and mobile devices.

Desktop Columns

Tablet Columns

On tablet device resolutions, you get 6 columns to play with. By default, tablet columns collapse to the full width of the page on mobile resolutions.

Mobile Columns

For mobile device resolutions the 6 column grid becomes a 4 column grid.

Nested Grid Demo

Shelves is the only fluid grid where the nested columns line up the grid, no matter how deep you go.

Now, you might think Shelves generates widths for every possible combination of columns within columns within columns within columns...Nope. The secret (yes, we're giving it away) is generating the nested columns widths a single time, but applying them backwards:

.column-11 [class*="column-"] { margin-left: 2.06186%; }
.column-11 .column-1 { width: 7.21649%; }
.column-11 .column-2 { width: 16.49485%; }
.column-11 .column-3 { width: 25.7732%; }
/* etc... */

.column-10 [class*="column-"] { margin-left: 2.27273%; }
.column-10 .column-1 { width: 7.95455%; }
.column-10 .column-2 { width: 18.18182%; }
.column-10 .column-3 { width: 28.40909%; }
/* etc... */

Yeah, this still creates about 50+ lines of CSS. If that bothers you, you can use the Sass mixins to apply nested column widths on only the columns you're using. Or if you think nested columns that align to the grid is a ridiculous, unatainable ideal, you can always generate the grid without nested columns:

$ shelves --skip-nested

Read CSS Documentation

Column Positioning Demo

You can easily shift columns over the left or right to create additional space between columns.

Read CSS Documentation

Nested Column Spacing

Column Reordering Demo

With column reordering you can control the order of your columns for SEO or mobile layouts, without sacrificing the visual layout you want on desktop resolutions.

Read CSS Documentation