Skip to Content
2015.04.20

Viewport Grid

See Live Project

A view port based CSS grid sys­tem that de­fines col­umn widths as a set per­cent­age of the screen rather the width of a con­tainer.

What It Is

A view­port based CSS grid sys­tem that de­fines col­umn widths as a set per­cent­age of the screen rather the width of a con­tainer.

Viewport Grid

What It Does

Creates a ro­bust grid that sim­pli­fies col­umn nest­ing, re­spon­sive widths, while pro­vid­ing op­tions for gut­ter widths col­umn counts, and other grid be­hav­ior. Viewport Grid puts less columns on small screen, and more columns on large screens. A col­umn be­comes a stan­dard unit of mea­sure­ment, cre­at­ing a con­stant and ab­stracted grid sys­tem that stands be­hind the con­tent of a page rather than within it.

Viewport Grid

Why We Did It

Original de­signed to ad­dress the needs of the Calcite Web grid sys­tem, Viewport Grid was de­vel­oped in­de­pen­dently in or­der to ex­pose it’s value to other, non-cal­cite pro­jects.

Viewport Grid

Why It’s Interesting:

Grid the­ory in graphic de­sign for print ap­pli­ca­tions dif­fers from es­tab­lished meth­ods for us­ing grids in CSS. Viewport Grid works to cre­ate a sys­tem where the clas­sic grid de­sign tech­niques can be used on the web, mean­ing a closer con­nec­tion be­tween the page’ and the screen.’

Viewport Grid
Viewport Grid

Viewport Grid puts less columns on small screen, and more columns on large screens. A col­umn be­comes a stan­dard unit of mea­sure­ment, cre­at­ing a con­stant and ab­stracted grid sys­tem that stands be­hind the con­tent of a page rather than within it. Original de­signed to ad­dress the needs of the Calcite Web grid sys­tem, Viewport Grid was de­vel­oped in­de­pen­dently to cre­ate a sys­tem where the clas­sic grid de­sign tech­niques can be used on the web.