InGrid

A responsive fluid grid framework with fixed margins, and some pre-defined layout models.

Ingrid's foundation can be found in Bootstrap's grid component, but is extended with layout modes that are inspired from Mueller Gridsystem.

The source is available on Github, and is MIT Licensed.

Examples

Note; Safari does not make use of correct subpixel rendering, and since InGrid is based upon percentage-based widths the columns can sometimes appear as they lack 1-2 pixels one some columns. This is something that one have to live with until Safari makes use of correct subpixel rendering (i.e. not rounding down to the nearest "full" pixel).

Spine

InGrid features a spine-aligned grid, which makes it easy to construct a layout that, if used right, can be more interesting than the traditional grid.

The spine is constructed of two even-sized holding columns — .left and .right — which within you place different sized columns.
InGrid ships with three predefined sizes — .wide, .normal, .small.

wide

normal

small

normal

wide

small

Two column asymmetrical

c-1

c-2

Two column asymmetrical, reversed

c-1

c-2

Three column layout

c-1

c-2

c-3

Four column layout

c-1

c-2

c-3

c-4

Regular n-spanning column layouts, with push/pull