Use Grid System Layouts on Your Website

By Lisa Lopuck from Web Design For Dummies, 3rd Edition

To help you lay out your website, set up a grid that you can use to align graphics, text, and HTML elements. A grid can be anything you like — a three-column layout, two horizontal sections, or a page broken into multiple sections.

Print design can still do some tricks that HTML and CSS can’t do as efficiently. For instance, an angled grid is easily possible with print design, but if you use HTML and CSS, their very nature limits your web-page grid to horizontal and vertical lines. Also, while it’s possible to rotate website elements using CSS, not all browsers will reliably render such effects.

One way to get around the horizontal and vertical alignment is to place a Flash movie on the web page that has an angled layout. Unlike HTML, Flash gives you a lot more design flexibility in your layouts. The Flash movie is simply embedded in the HTML page just like a graphic — and like a graphic, it’s ultimately aligned by your grid system.

The grid is unavoidable, and that’s a good thing. Grid systems are intended to impose a logical order on your web-page layout. Rather than randomly carving out a spot for everything that is to go on the page, aligning the elements with each other makes the page easier to read, easier to build, and more professional in appearance. Compare the two web-page layout sketches in the example. On the left, the elements look thrown on the page. On the right, the same number of elements is neatly presented.