Griddle

Griddle is a fluid and modular grid system for modern browsers — IE8+, Firefox, Safari, Opera, Chrome.

It uses inline-block and box-sizing to provide features that float-based layouts cannot. At Griddle's core is a set of Sass functions and mixins that automate the production of the grid's CSS.

The benefits

Using inline-block, box-sizing, and percentage units at the core of a CSS grid system has several advantages:

Individual cells wrap "intelligently" within the grid - this has some benefits for layout adjustments at different viewport dimensions.
Grid gutter and offset dimensions can be kept independent of the grid cell proportions.
Easy horizontal centering of cells, some control over vertical alignment.
Suitable for simple "responsive" layouts.
Easy grid nesting.

Proportional grids

The griddle-build Sass mixin makes it easy to create several proportional grids (e.g., both a 2-part and a 12-part grid). It will combine rules where possible.

For example, griddle-build(2 3 6 12) will let you use the unit-1-2, unit-2-4, unit-3-6, and unit-6-12 classes to specify that an element should take up 50% of its container.

<div class="grid">
    <div class="grid__cell unit-1-2"></div>
    <div class="grid__cell unit-1-2"></div>
</div>

Nested grids

Place a new grid object within a grid__cell.

1/2

1/3

Centered units

Method 1. Add the grid--center modifier class to automatically center all units within a grid. It adapts to accomodate and center a variable number of units.

<div class="grid grid--center">
    <div class="grid__cell unit-1-3"></div>
    <div class="grid__cell unit-1-3"></div>
</div>

1/2

1/3

1/4

Method 2. Add the grid__cell--center modifier to any grid unit and have just that one unit centered on its own row. The grid unit can still be used to contain child grid objects.

<div class="grid">
    <div class="grid__cell grid__cell--center unit-3-4"></div>
</div>

1/2

3/4

1/3

Hybrid units

The grid system allows for a mixture of fixed and fluid units, but requires some customisation. For example, a fixed-width sidebar in a fluid-width app can be created by adding a custom class that sets a width and floats the unit: .sidebar {float:left; width:320px;}.

Nested grid objects are used to house the fluid-width content, which adapts to fit the remaining space available. Each unit within the nested grid is sized relative to this remaining space.

<div class="grid">
    <div class="grid__cell sidebar">[sidebar content]</div>
    <div class="grid">
        <div class="grid__cell unit-1-2">50% of remaining width</div>
        <div class="grid__cell unit-1-2">50% of remaining width</div>
    </div>
</div>

full

1/2