What is a grid system

Using a grid system in your designs is one way to2 create a level of order that would be otherwise difficult to achieve in your designs.

A grid system is comprised of a series of horizontal and vertical lines which intersect and are then used to arrange content. In even more basic terms (which make it easier to understand!) a grid system is a way of providing a system that designers can work with to structure and present content and imagery in a much more readable, manageable way.

The revolutionary 960 grid system was pioneered by Nathan Smith. At 960px wide and made up of 12 columns 60px wide. Each column has a 10px margin on the left and right, which create a 20px gutters between columns. This was the foundation for our responsive grid system. 

Responsive grids are the idea that a website should adopt a different number of flexible columns that grow or shrink depending on the current screen size. On mobile devices, there will be less columns, and on desktops there will be more.

History in the making

These days, responsive design is something we all take for granted. When we visit a website, we expect it to work and look good on all our devices, no matter what the screen size is.

By the late 2000’s designers and developers came up with a number of techniques to adapt sites to different screen sizes before settling on responsive design. The standard solution at the time was to create a version of a site just for mobile and make it available on a subdomain. But there are some definite downsides, this means that developers have to maintain two, sometimes very different, websites instead of just one.

Then in 2010, Ethan Marcotte published an article in A List Apart where he outlined a new way of thinking about flexible web design. In the article, Marcotte introduced a new approach to this challenge, using media queries. Media queries is a feature of CSS allowing content rendering to adapt to different conditions such as screen resolution (mobile and desktop screen size). It became a W3C standard in June 2012, and the Nine Sixty Grid System was released later that year and forever changed the way we approach responsive design