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