/Gridder

A simple HTML5 webpage to experiment and evaluate different base column layouts for user interface designs.

Gridder

Introduction

A simple HTML5 webpage to experiment and evaluate different base column layouts for user interface designs.

It takes as inputs the screen dimensions, the desired number of columns, a gutter and minimum margin, and calculates the columns with, margin, as well as how well the grid handles an orientation change.

Known issues

  • No support Internet Explore prior to version 9.

Usage

Simply enter the screen dimensions (in pixels), and start to change the column count, gutter, and minimum margin values to see the effect on the grid.