Content
csswizardry-grids is a fully responsive, mobile-first, infinitely
nestable,
reversible, reorderable, simple to understand,
human-friendly, robust grid system.
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.2
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
Grid 7.1
Grid 7.2
Grid 8.1
Grid 8.2
Grid 9.1
Grid 9.2
The following, far simpler grid layout uses Sass’ @extend
feature to keep the classes out of your markup.
Content
Sub-content