Frag Grid Demo

This is a demo page for Frag, a fluid, responsive, simple grid system for CSS
Return to the main site for documentation.

Basic Columns

A simple responsive grid is easy to achieve (try resizing the window).
View documentation.

01
02
03
04
01
02
03
04
05
06
01
02
03
04

Frag also supports right-to-left columns.

01
02
03
04

Unequal Heights

Unequal columns heights are no problem.
View column clearing documentation.

01
…
02
…
…
03
…
…
…
04
05
06
…
…
07
…
08
…
…
…
…

Nested Grids

Grids can be nested easily in modern browsers.
In IE 6–7 all nested columns span the full width of their parent.
View nested grid documentation.

01

01

01
02
03
04
01

01
02

Hiding Columns

Individual columns can be hidden/shown at different breakpoints.
View hiding columns documentation.

Visible at all screen sizes
Visible at mobile size only
Visible at tablet size only
Visible at desktop size only
Visible at mobile and tablet sizes only
Visible at tablet and desktop sizes only

Find Out More

You can find out more about Frag on the main site or by reading the documentation.