modern responsive
modular grid system

Since their first introduction in the 50s, grid systems allowed designers to speed up their process by creating a simple base structure where to freely develop their own ideas. In the last few years of web design, lots of grid systems were created to port this tool to the digital age. However, most of them, due to rapid aging of technology, are now outdated, while others simply can’t be called grids since they don’t allow to keep vertical rhythm.

The need for a definitive solution to web grid systems is the main concept behind this new digital iteration of the famous Unigrid, one of the best works by italian graphic designer Massimo Vignelli. Even if you’ll find a download button, this grid system is not only a file to be added during development, but a strong concept that can be used on any device, thus being a timeless idea, not subject to technological aging.     

Alberto Arlandi, Designer


Calculating the grid
All the elements of the grid are based on a unit we’ll call U. U is obtained by splitting all the space available in the viewport in a defined amount of subdivisions. U is then equal to the gutter, the space between modules of the grid.

Modules are always square and obtained by multiplying U for a set amount of times. These squares can be easily stacked and grouped, allowing "modularity". As a result, setting text with a line height based on U will fall perfectly on the grid.

Finally, just like the original Unigrid, outer margins have a fixed proportion of 2xU.
Other elements such as the header and inner black stripes should be also calculated from U to mantain coherence (like the ones in this page).

Just like music, Uniweb has a sort of tempo you can sync to. The 1x1 module is the click sound: simple or complex layouts can be built upon it, but they will always stick to the base “beat”.

Unlike the original brochures, viewports aren’t fixed on the web, so grid systems must support lots of different screen resolutions. Uniweb calculates U from the maximum space available, scaling the number of columns so that each module will always have an appropriate size, on desktop or on mobile phones.

There are 5 layouts: 12 columns (desktop, covering more than 1600 pixel screens), 8 columns (laptops from 1300 to 1599 px), 6 columns (tablets from 1024 to 1299 px), 4 columns (phablets up to 1023 px) and 3 columns (for phones, landscape or portrait modes, up to 639 px). Media queries can be fine tuned to better adapt the switches to the design of the page.

Unlinke many other grid systems, Uniweb covers the whole space available in the viewport. However, single column websites can be made as well by leaving empy modules on the sides.

Uniweb consists of few lines of CSS code, no extra plugin or file is needed. It’s a single file that weights around 10KB, but you can get a minified version to save an extra 4KB.

Uniweb uses viewport-percentage lenghts (vw and vh units) as it’s the only way to get a true responsive layout with squares as modules. All of the modern browsers are supported, but you can check for further details about vw and vh support. A javascript polyfill may be required if you need to support older browsers, which is not included in this release.

how to use

Container and elements
First you need to specify a container, it’s a simple <div> with “main” as id. This will create a sandbox with font-size: 0, so you can place all the modules you want without worrying about line breaks.
Each module is yet another <div>. First you must declare “element” as class, so that it will be treated as a module. Then you need to specify height and width of the module, for each layout of columns.

As shown in the following table, a 1x1 module is written as h1_w1. An element 3x6 will be h3_w6 and so no. Some of the most common sizes are provided in the CSS, but you can create more of them by multiplying (1x1 module + gutter).
You must specify the size of the element for each step, using the right prefix: l for laptop, t for tablet, p for phablet, m for mobile and no prefix for desktop.

You should get something like class=”element h1_w12 lh1_w8 th1_w6 ph1_w4 mh1_w3”. Some additional classes are provided, like “desktophdn” (laptophdn and so on) to hide an element at a particular step; “autoheight” (l_autoheight and so on) to fit the container to the height of the content and “nomargin” (l_nomargin and so on) to remove the right gutter in case of nested layouts.


Uniweb in use
This website is of course made using this grid system, you can view the underlying Uniweb using the switch on the right. Another website I suggest checking out is Archivio Grafica Italiana where you can see the Uniweb in action.

show grid

Development and production (minified) versions are available. Include the css at the top of the page just like any other stylesheet.

A PDF template is available for your next web design project. It contains all the layouts of the Uniweb with the right proportions.

uniweb.css uniweb.min.css .pdf template

The Unigrid by Massimo Vignelli
In 1977 Vignelli Associates designed the basic format and prototypes for all publications of the United States National Park Service. Unigrid was the name given to the flexible grid with its iconic identification black band at the top, which was used for brochures, bulletins and books. Check out Vignelli Associates’ website, this article and this Flickr album for more information.

Copyright ©2015 Alberto Arlandi
back to the home page

Creative Commons Attribuzione - Non opere derivate 4.0 Internazionale