Tips & Tools for Grid-based Layouts

When you first start planning a web design project where do you start? Color scheme, fonts?

Probably not. Most of us 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. (Often in this scenario, a separate grid exists within the website body to help create a sense of order.)

Column Grid

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.)

When using a vertical column-based grid, the lines are typically invisible and only known to the designer or developer. What these lines do though is create a plane for all the objects – text, images and even ads – so that everything lines up neatly. This will create a distinct organization and overall sense of harmony.

Build a Grid

The first step in creating a grid is to set your constraints. How wide will your page be? (And are you accounting for varying browser widths?)

When designing the grid, think about how elements will live within the columns. Are you planning to design strictly in column and rows, such as a site like J. Crew or is your grid going to be used more in a way that looks “less gridded?”

Then you want to think about flexibility in design – how many columns you want to work with. Ideally, you will work in sets of threes or fours, so that you have divisible groups that can be broken into smaller parts. When considering the number of columns in your grid, also take gutter widths into account. Commonly, gutters are 10 to 20 pixels wide.

Then it is time to do the math.

Determine your overall site width. Set a gutter width. Determine the number of columns. Take your overall width minus the gutter widths (keep in mind that you have one less gutter than total number of columns). Divide the remaining number by the total number of columns to get a width for each column.

Responsive Grid

One of the main things you will want to consider when looking at grids is the ability of the grid to be fluid. Because of all the different browser widths, tablets and mobile devices being used to view each website, the ability of a site to accommodate each platform is important.

You will also want to think about what parts of your grid you want to be affected and how. Do the columns change widths? Or do parts of the site vanish? What about gutter sizes? Your key choices here are to determine if you want items to scale proportionately or if your design allows for changes to the look based on device or browser size.

The hardest part of designing a grid for responsive design can be the math. There are so many formulas and ratios and equations to account for. This is where some pretty awesome tools come in.

Grid Design Tools

Columnal: An 1,140-pixel wide grid design that allows for the widening and shrinking of browsers in responsive design. The “elastic” grid contains columns and sub-columns to optimize sites at almost even width, including mobile.

1140 CSS Grid: A grid system that is fluid and uses 1,140- and 1,280-pixels as the basis for a 12-column grid. This 12-column structure then divides into grids of two, three, four or six columns to accommodate for changes in browser width.

960 Grid System: Create a grid based on a width of 960 pixels with varying numbers of columns. The beauty of the 960 grid system is that it contains multiple grids so that it looks almost as if you are using no grid at all.

Frameless: The Frameless grid contains fixed-with columns that help you adapt to different browser sizes. It helps you plan and design for mobile without being a traditional responsive design grid.

Elliot Jay Stocks: A better Photoshop grid for responsive web design takes the math out of responsive design for you. Check out his Photoshop design.

Responsive Grid System: Fluid grid CSS framework with 12, 16 and 24 columns plus media queries for all standard devices.

SimpleGrid: Responsive grid with one class for all units of a single size making it self-aware and intuitive to use.

Gridpak: A generator that helps you create a responsive grid. You can add the number of columns, padding and gutter width and it will generate all the files you need.

Skeleton: Skeleton’s base grid is a variation of the 960 grid system. The syntax is simple and it’s fluid down to mobile.

Golden Grid System: Golden Grid System (GGS) helps creating a fluid grid layout where 16 columns can be combined or folded into 8 columns for tablet-sized screens and into 4 columns for mobile-sized ones.

Zen Grids: If you use Sass then Zen Grids might be interesting. It’s a responsive grid system built with the power of Sass.

Responsify: Easily generate your own responsive grid template and preview it on different screen sizes with this online tool.

Gridiculo.us: A fully responsive grid boilerplate that takes you all the way from 1200px down to 320px.

Fluid Baseline Grid System: Build with typographic standards in mind, the FBG is designed for mobile first. CSS styles are scaled up from the minimum instead of scaled down from the maximum through the use of media queries.

Twitter Bootstrap: Twitter Bootstrap gives you all the HTML, CSS, and Javascript for the most popular user interface components and interactions. It comes with a robust responsive 12-column grid system that will ease the development of your whole project.

Analysis

So all of this might look like too much to think about. Grids are a lot of work.

But they are totally worth it.

You need a grid. Don’t let anyone convince you otherwise.

A grid structure creates the necessary outline for so many aspects of your website. It helps you create balance and harmony. It gives you a set of rules of alignment and image scaling. The grid can even help you determine what size your body font should be. (As a guideline, start with 8 point type in a 100 pixel column and increase the font by two points for every 100-pixel increase in width.)

A columnar grid can also help you make choices about the horizontal spaces on your website, when you use it in conjunction with principles such as the golden ratio and the rule of thirds. Combining these mathematical properties can help you create a simple and beautiful design that just feels right.

Finally, you must think of responsiveness as part of your grid design. There are just too many users on too many devices out there to ignore the importance of the ever-changing grid. Don’t be intimidated by the math, use a web calculation tool and make sure your site outline accounts for a variety of possibilities.