Grids have been around for a long time. It's a basic principle of visual and spatial organisation, be it within painting, architecture or design. From the Parthenon to iOS. From the ancient Egyptians to the not so ancient city planning of Brasilia.


What is a grid

So what is a grid? A grid consists of columns. Columns are the basic elements of a grid. Grids have gutters separating the columns. In the example above the columns are marked with red and the gutters are marked blue.

Grids were an integral part of the german typographic movement (also known as International Typographic Style or Swiss Style movement) that emerged after World War II. The movements' roots can be traced back to the Bauhaus school of design which originated in the 1920's. Well known examples of this movement are fonts such as Helvetica, Futura and Gill Sans. Above: an exampel from the Geschwister Scholl Gendenktag book (1963). But the principle of grids has always been there - below: Palazzo Rucellai, Florence (1446, disegno della facciata di Leon Battista Alberto).


In the era of the Internet and HTML/CSS, grid systems have become a common solution for transfering a design created by a designer to code by a developer.

Above: using ninesixty 2011

In the very early days this was done with tables, a technique that somewhat undeservedly came to be in disrepute because the <table> HTML element was not intended for creating grids, but for -- you guessed it -- tables. The reason why tables were frowned upon is the (very sound) concept of separating content and presentation.

The table layout technique thus came to be replaced by grid systems such as ninesixty or the grid system of Bootstrap which gave a more semantically correct markup than tables. A more recent solution is grids with flex-box. However most developers are currently anticipating CSS grids going mainstream.

CSS grids are not supported in IE11, so it will still be a while before css grids are the default solution for creating grid based designs.