The grid system has long been touted by web designers as a standard “go-to” when designing for mobile devices.
It adds structure, cohesiveness, and readability, filing content cleanly into neat compartments for practical navigation on smaller viewports. It creates great usability and an instantly clean looking content orientation, so of course designers are using it for mobile.
So… why exactly should they limit that functionality to just mobile?
Well, the answer is that they shouldn't.
A grid system essentially splits the total window width (e.g. 960 pixels) into 12 (80 pixels wide each in the case of 960 total pixels) or 16 (60 pixels wide each in the same case) columns or containers, which designers and developers can then combine (e.g. two 60 pixel wide columns combining into a larger, single 120 pixel wide column to fit in more content) or further split (one 60 pixel wide column being split into two 30 pixel wide columns to create two smaller sections that have less content fitting in each) depending on the size of the content.
The 960 pixel wide arrangement for example, is divisible in at least twelve different ways (depending on individual column width) to fit a variety of screen sizes, content, layouts and purposes.
The result: simple, clean, modular layouts in a language that both designers and developers understand.
The grid system allows designers and developers to speak a common design language: the basic partitioning of screen space. This is something common to both types of web artisans, whether they’re working in Illustrator or a text editor.
Using a standardized window width that’s easily divisible into different sized columns/containers is easily translatable from design to code, using a framework mutually understandable by both parties (A column is a “guide” created in Photoshop to a designer, which is simply a floated “div” or “container” to a developer).
The result is rapid prototyping and launch, from wireframes to code, as the same basic, modular grid template (with varying column/container sizes) can be used for a variety of site designs and looks.
This leads directly into this system’s conduciveness for responsive design. Depending on the screen/window size, columns can easily be designed to be shrunk or enlarged by simply changing their dimensions. This allows for easily flowing content for a web page depending on the size of the device by simply changing the dimensions of the columns on the grid, instead of redesigning and recoding everything from scratch for each device.
In fact, a cursory look at responsive CSS frameworks like SASS, Bootstrap and Foundation will give you an idea of how useful a grid system really is on the web, as it is quickly becoming adopted and integrated as a standard for nearly all of them.
Entire CMS platforms are also quickly making use of the grid system, and for good reason. A grid compatible CMS allows admins much more freedom and control in their site’s front-end. It not only gives them the ability to edit their content, but also the look and layout of their pages, by once again, simply choosing the container/column sizes that their content fits into.
This adds an entirely new level of freedom and creative control for site administrators, allowing them to easily make visual/layout changes on top of their content changes.
In this quickly changing web landscape, fast communication between designers and developers is key, and the grid system provides a common language to quickly take designer’s prototypes and convert them into standardized web compliant code.
Furthermore, the web is increasingly demanding faster turnaround times and responsive functionality, and the grid is an answer to the problem of rapid prototyping with simple responsive design.
Entire frameworks and CMS platforms are being built with this in mind, adding features that allow site administrators to choose container or column sizes to edit the looks and layouts of their sites on top of just the content.
The internet is often amicably called “a series of tubes” by digital natives, but it’s also quickly changing into a series of grids. And this is a very, very good thing.
