gridbox.css

A CSS toolbox of handy grids, compatible IE8+.

Wrap grid

Size every cell according to the grid width.
The elements automatically wrap to another line, if there is not enough place left.

• 1/2
• 1/2
• 1/3
• 2/3
• 1/4
• 3/4
• 1/5
• 4/5
• 1/6
• 5/6

Weight grid

The weight grid is a one-line grid.
Without configuration, it allows you to share a width into equal-width columns.

• Cell 1
• 2
• 3
• 4
• 5
• or more

You also can distribute the width according to a weight for each cell.

• Weight x1
• x1/2
• x1/3
• x1/4
• x1/5
• x1/6

• 1
• x2
• x3
• x4
• x5
• x6

Fluid grid

The fluid grid is also a one-line grid.
Without configuration, it distributes the width automatically according to the place that every cell need.

• Every cell
• has a size proportional
• to
• its content

You can use it to create media object patterns, because the cells could be sized to fit its content.

• A media
• The rest of the width

• The rest of the width
• A media