Skip to main content

Grid

Define​

A two-dimensional structure of guide lines used to structure web pages

Grids have long been used in visual design to add structure and consistency to a page. Objects on the page are sized and placed to fit a regular, two-dimensional system of lines, ensuring regularity and alignment. The guidelines themselves are invisible in the final product.

For the web, grid systems can broadly be categorised as 'fixed' or 'responsive'.

Fixed grids have predetermined dimensions, often intended to suit the size of certain devices. For example, the popular 960 grid, named for its width of 960 pixels, is intended to fit neatly on computer monitors with a width of 1024 pixels. When viewed on a smaller device, the page must be panned or zoomed to be seen in its entirety.

Responsive grids restructure the page to suit the size of the device used to view. In this way page content appears to be optimised for a range of screen sizes. Though flexible grids are not new, the rise of smartphone and tablet devices has fuelled the growth of responsive technology.

Modern web grid systems are often packaged with code libraries (together known as 'frameworks') to simplify development of pages designed to fit the accompanying grid system.

Resources​