Vertical Grid

A vertical grid css system designed to play nice with Bootstrap.

View project onGitHub

A vertical grid css system designed to play nice with Bootstrap.

Visuals

Take your grid from this:

Default Bootstrap grid

to this:

Vertical Grid grid

Motivations

We don’t need to think much about the height of most web pages we’re building. Maybe we try to get the most important content “above the fold”, for whatever that’s worth these days, but otherwise we create complex frameworks for horizontal grids while letting the vertical dimension scroll as it wants.

Generally that’s just fine. But once in awhile the situation arises where you care about a defined height for a page. A good example is a “status board” that sits on a wall displaying a single-screen’s worth of metrics with no user interaction. Vertical Grid helps in these cases. It’s just like the Bootstrap grid system you’re already using, only vertical.

Instructions

Look in the example directory for some sample html code.

Wrap all your elements in an element with class="container-vertical".

Add one of vertical-span1, vertical-span2, ... vertical-span12 to each of your rows.

Rows can be nested.