Viewport Grid

A view port based CSS grid system that defines column widths as a set percentage of the screen rather the width of a container.

View Project

What It Is

A viewport based CSS grid system that defines column widths as a set percentage of the screen rather the width of a container.

Viewport Grid

What It Does

Creates a robust grid that simplifies column nesting, responsive widths, while providing options for gutter widths column counts, and other grid behavior. Viewport Grid puts less columns on small screen, and more columns on large screens. A column becomes a standard unit of measurement, creating a constant and abstracted grid system that stands behind the content of a page rather than within it.

Viewport Grid

Why We Did It

Original designed to address the needs of the Calcite Web grid system, Viewport Grid was developed independently in order to expose it’s value to other, non-calcite projects.

Viewport Grid

Why It’s Interesting:

Grid theory in graphic design for print applications differs from established methods for using grids in CSS. Viewport Grid works to create a system where the classic grid design techniques can be used on the web, meaning a closer connection between the page’ and the screen.’

Viewport Grid Viewport Grid

Viewport Grid puts less columns on small screen, and more columns on large screens. A column becomes a standard unit of measurement, creating a constant and abstracted grid system that stands behind the content of a page rather than within it. Original designed to address the needs of the Calcite Web grid system, Viewport Grid was developed independently to create a system where the classic grid design techniques can be used on the web.