Tips & Tools for Grid-Based Layouts

Grid-based layouts - the basic for every website

When you first start planning a web design project where do you start? Color scheme, fonts? Probably not. Most of you start with a sketch outline of the site’s structure. And a big part of this structure lies in the grid – a vertical set of guidelines that help determine shape, placement of items and overall look of each website. There are a variety of grid-based structures. A grid can be made of multiple columns and gutters of equal widths. Grids can also be created from columns of varying widths, a technique commonly used when outlining the body of a website that will include sidebars.

 

Every vertical grid is comprised of two things – columns and gutters. Columns are the wider divisions, while gutters are defined as the equal spaces between columns. Even when a grid contains columns of varying widths the gutter widths are most often static. Web grids vary widely and there is no magic formula for number of columns or width of gutters. Often web grids range from a two-column format to 12 columns. (Depending on the width of your site, anything more than 12 columns will create columns so thin that you will not benefit from the creation of a grid.)

Comments

Be the first to write a comment

You must me logged in to write a comment.