Responsive CSS only grid with fluid columns and fixed-width gutters Browser support from IE8+ (Responsive support from IE9+)

Instructions

This grid follows these breakpoints:

320 (320-479), 480 (480-767), 768 (768-959)

Classes used:

hide-768, hide-480, hide-320

Hide the element at that breakpoint. Supported breakpoints: 320-479, 480-767, 768-959

grid

Add this class to the containing element. If should only have <divs> as its direct children, each with one of the following classes:

col-16, col-20, col-25, col-30, col-33, col-40, col-50, col-60, col-66, col-70, col-75, col-80, col-83, col-100

The possible column widths. Place these on the direct children of the container .grid

full-768, full-480, full-320

Add to the containing element to make all of its children full width at that breakpoint.

padded

Add this class to the containing element. It will add the padding to the container equal to the gutter width. See examples

no-gutters

Add this class to the containing element. It will remove all gutters from the children. See examples

col-right

Add this onto one of the columns. It will allow for splitting a column to go the top or bottom on mobile screens. See examples

Examples

Grids we use can be divided as such:

They can also be padded like so:

They can be put together in any combination that adds up to 100 (99 rounds up to 100):

You can also remove the gutters from the columns:

You can divide up a columns to go to the top or bottom:

And, of course, you can simply make columns disappear at our breakpoints as well.

Hide @768px and below

Hide @480px and below

Hide @320px and below

Lastly, here are some crazy stacked examples:

NOTE: IE8 does NOT support media queries, so columns never collapse to full width.