csswizardry-grids

csswizardry-grids is a fully responsive, mobile-first, infinitely nestable,
reversible, reorderable, simple to understand, human-friendly, robust grid system.

View on GitHub

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.

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

The following, far simpler grid layout uses Sass’ @extend feature to keep the classes out of your markup.

Content

Sub-content