The use of grids for visual layout is a technique that dates back hundreds of years. Pick up any newspaper and you can see a grid at work. Its principal aim is to bring visual harmony to possible discord. A great grid structure can bind columns of type, the media within them, the headings above them, and more. At the risk of being reductive, a grid helps provide some relationship between the component parts of a layout.
Note
Although we will consider Sass and Compass tools for building a grid in this chapter, the fundamentals of creating grids and how to establish relationships between elements is beyond my expertise, so I’d therefore recommend taking a look at this round up of resources at Smashing Magazine: http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/.
When tasked with building a website from a graphical composite, it’s possible you’ll be building a grid system without even realizing it. A good...