Fluid Grid

Grid Examples

The grid below shows a combination of nested, gutterless, reversed, centered, responsive grids, all using classes in the HTML. Each integer represents the high-level grid item you are looking at, and each decimal represents the grid item’s level of nesting (if any), e.g. Grid 5.3 represents the third nested grid inside of the fifth major grid.

This is based on CSS Wizardry Grids: See link for docs or the scss file for documentation

Grid 1.1

Grid 1.3

Grid 2.1

Grid 2.2

Grid 2.3

Grid 2.4

Grid 2.5

Grid 3.0

Grid 4.1

Grid 4.2

Grid 5.1

Grid 5.2

Grid 5.3

Grid 5.4

Grid 6.1

Grid 6.2

Grid 6.3

Grid 6.4

Narrow gutters

Wide Gutters

Centered Grid