The practicalities of using a grid on the web are such that a few common sizes have become the standard, with the most common being the 960px grid system. Understanding the value and benefit of having a grid system in place, it's understandable that web designers have moved to adopt grids.

Remember that a grid is the invisible glue behind content - in most cases it should be transparent to the viewer. Why would you want to appeal in these terms? Because by doing so, you're making the content more accessible to the reader. When used in combination with a grid, these simple rules for size, position and proportion can help ensure a layout feels both coherent within itself, but also appealing aesthetically.

The golden ratio (also known as the golden mean) determines the most pleasing set of proportions for an element, and is simplified to the 'rule of thirds'. One such example of cross-over is where the golden ratio meets the grid. Grids have existed intuitively since the earliest days of man drawing and writing, but it's only recently that layout has been considered in a scholarly fashion, and as such they've never existed in isolation from other best-practice, well understood layout tools. The whole concept of a definitive grid 'system' is a relatively recent invention in the world of design. Grids, the rule of thirds, and the golden ratio. Screens can be more fluid, and as a designer it's not possible to know with the same confidence what size and shape of screen will be used to view content.Regardless of this, proportion and scale are important tools in a layout so using a grid to determine and enforce rules helps to define that all-important set of signposts that helps the reader to access and understand content. This feels comfortable because the reader subliminally understands the context of the layout as a result of the physical shape and size of the delivery mechanism (in this case, a piece of paper!).On the web this idea of reflection isn't quite so important, but grids can be be used in the same way to anchor content back to the screen. In print, proportions most commonly echo the size of the media the shape and orientation of the paper are often reflected in the size and shape of images included within a layout, for example. Grids define and reflect proportionДЄ key aspect of the grid is its ability to help determine and define proportion. So, how do you use a grid to establish a meter and rhythm? 02. Think of a grid as providing the road-map along which your viewers travel. It sets expectations and defines the rules, timbre and - in some cases - voice of the design. The rhythm and meter of a layout is an important part of making the content accessible, helping the viewer to understand where to find the next piece of information within the layout.

Not only does an effective grid provide the rhythm for a design, but it also defines the meter. The foremost purpose of a grid, in graphic design at least, is to establish a set of guidelines for how elements should be positioned within a layout. So, with that promise made, let's get started. We're here to set that straight with this simple pocket-sized guide to the grid, including a small smattering of theory! While some designers actively eschew grids in favour of a more intuitive, free-form layout, the most successful do so having worked with grids for years - they understand the rules before they break them.So whether you're a traditionally-taught designer or just finding your way without any formal training, we'll help you out with the basic terminology, practice and purpose of the grid. While art college graduates will know all about it, for self-taught web designers, there's much theory and rationalisation of the grid as a design tool that simply isn't covered by the typical blog posts and conference talks. For an entire generation of designers on the web, however, the grid is something of a mystery. This has come about as the web has matured into a more capable design platform, and web designers (and developers) have created reusable CSS libraries and frameworks to simplify the process of deploying and leveraging grids to create balanced page layouts. Grids are like the invisible glue that holds a design together, so whether you work in print or on the web you need to understand grid theory.There's been a resurgence in the popularity of the grid in recent times. Whether you work in web or print, you need to understand grid theory - even if you eschew grids.

Grids in design