All about Grid systems for web design

Home / Portfolio  / All about Grid systems for web design

Put simply, grids enable you to start with a consistent structure and organise code efficiently. Although many people think web design grids are simply for geeks, the clear delineation of elements that adjust to any screen size actually makes for a very clean user experience, which makes them a good choice for graphic designers, too. We encourage graphic or front-end designers that we work with to use grid systems now so that solid structural systems are factored in from the first moment, and carried right through to the development phase of any project. We use grids as a means of understanding how the elements reorganise themselves as page widths diminish.

What exactly is a website grid system?

For those of you that aren’t familiar with the concept, a grid system simply a conventional series of vertical and horizontal lines onto which content blocks can be arranged. To our knowledge, almost all major web development agencies are using grids now, and with the increasingly diverse array of devices upon which a single design need fit, their mathematical uniformity offers a comforting structure upon which to conceive of what is essentially a creative project. Most of the big websites you’re used to perusing are probably originally built from a grid system.
Think of the grid as a planning tool for designers and developers. When a design is laid out in a mathematically coherent manner, the end result is usually easy to navigate, and visually appealing.

Advantages and disadvantages of a website grid system

the biggest advantage of the grid is the clear delineation of elements, the flexibility, and the ability to design in clean proportions. If there is a disadvantage it’s that some people imagine grid systems to be restrictive and that there quite complex to implement. Essentially grids are about using mathematical formulas to predict the ways in which design elements are going to evolve over different screen sizes and proportions. Of course, there are various tools to make this easier, these days but you’ll still need to be reasonably comfortable with mathematics. Fortunately, most of us who have chosen web development as a career, are comfortable on that side of the brain anyway. It can be harder for graphic designers to get their head around, but it’s certainly achievable.

How would designers use grid systems on a day-to-day basis

If you’ve never used grid before, simply start out by finding one of the commonly use grids and setting an overlay of the grid onto your design. Photo shop or in design are well-suited to this. Now it’s time to calculate the number of columns, their width, and of course the width of the padding between columns. In addition, you’ll need to calculate the vertical space that is available and see how that fits into the design at large.

Premade grid frameworks

Just Google grid frameworks and you’ll find dozens of excellent examples of grids that will work. These include the responsive grid system, the golden grid system, and of course 960.GS. These will support your web design project and tied together in a fluid system which can take the product further. Ultimately their assistive tools and building a mental model of your website. We wish you good luck.


Further Links:



Get a quote.

Just fill in our really simple form below or call 01273 257038.

We'll do our best to respond within 2 working hours.
If you need a quicker response please call us on 07900 217 720.