Primer on Web-Based Grid Systems

  •  6 Comments

What’s in a grid? A grid-style framework is the backbone to almost any web design project, providing the structure for your site as well as a way to organize content, elements and images.

There are a variety of grid systems out there that you can buy or download free. You can also create your own if you are feeling ambitious. But one thing is for sure, you can probably benefit from using a grid system in your projects. (Every one of the website examples in this post did.)

What is a Grid?

Newsweek
Lamri
Newcastle

A grid is a set of invisible lines – that run vertically and horizontally – that help you dictate where to place content. The structure is designed in columns and rows of equal spacing with a margin (or gutter) between each.

Grid systems have been around for a very long time. Print designers use them and grids are making their way into more and more digital design projects. In web design, many of these grid systems come in the form of frameworks, which have become a standard format for creating websites.

The benefit of using a grid is that it helps organize content to create a consistent design. While users will never actually see your grid, designing on it will create a sense of flow and harmony, making your final product much easier on the user in terms of aesthetics and use.

Grid Pros and Cons

Billy Jean
Riot
Red Antler

Grid systems can really help a designer of almost any experience level complete a project with ease and consistency. But some designers still aren’t complete fans of using this technique.

Pros

  • Uniform design and consistency between pages
  • Balance in design between elements and white space
  • Prevent overcrowding of elements within the space
  • Reduced coding since you are not starting on a framework from scratch
  • Nesting allows subgrids within the framework
  • Control over the design and structure
  • Provides design stability
  • Makes for ease of moving elements and placing them in different locations

Cons

  • Some say grids “stifle” the creative process
  • Can be more difficult for sites with little content
  • Some sites end up looking similar
  • Grid systems can be tough for new users

Types of Grids

Paul Calver
mps
Go food

Historically, there are four basic types of grids – manuscript, column, modular and hierarchical. Add to that the most important type of grid system in today’s web design world – responsive.

Manuscript grids are developed in the form of blocks. These blocks determine the location of elements in the overall frame of the design. This grid style works for large blocks of text. Consider using it for the frame that will contain body text in a blog.

Column grids are exactly what you might expect – columns that run vertically across the page. Many grid systems contain some type of columnar format for organizing content. This is a common practice in web design.

Modular grids are an extension of column grids. They include both columns and rows to organize information. (Think about a table, for example.) A metro-styled website would be based on a modular grid.

Hierarchical grids are a more organic grid format and use a set of like objects to create vertical and horizontal space. In many cases, objects are placed on the canvas and then arranged in to some sort of order. Designers who create their own grids or base a system off a document grid are likely using this format.

Responsive grids are part of the hard coding of a website that give instruction for how the grid itself will shrink or expand based on device size. The responsive grid is based on percentages to determine size and placement rather than a hard canvas size. Most designers use a framework to create responsive grids to save time. There are a lot of responsive grid frameworks available for use, many of which are open-sourced and can be downloaded free.

Popular Grid Systems

When it comes to web design and grid systems the one thing you need to be mindful of is responsiveness. More than likely you will want a responsive framework for your project. Too many websites are viewed on too many device types to ignore responsive web design.

Here are 11 popular grid systems (and they’re all free):

Bootstrap

Bootstrap

Currently, the most popular framework being used on the web.

Zurb Foundation

Zurb Foundation

This framework touts speed and is fast for users, faster for designers and developers and easy to learn.

Skeleton

Skeleton

This framework is a collection of CSS files and includes a base 960 grid that scales for every device.

Responsive Grid System

Responsive Grid System

This grid system is just that and allows you to customize the number of columns and then plug it right into your design project.

CSSWizardry-Grids

CSSWizardry-Grids

This grid system is nestable, reversible, easy to understand and robust.

CSS Smart Grid

CSS Smart Grid

This grid builds on the popular 960 concept and scales for a variety of devices.

Gridlock

Gridlock

This grid works by nesting cells within rows and includes adaptive and fluid grid options.

Simple Grid

Simple Grid

The grid system uses infinite nesting, one class per element and is simple to use.

Golden Grid System

Golden Grid System

This system features “folding columns,” gutters, a baseline and script for a complete grid system vertically and horizontally.

Gumby

Gumby

This framework uses a grid defined by row classes to create horizontal rows which also assign the page’s max-width, and function to contain the various page columns.

Unsemantic

Unsemantic

This is the responsive successor to the popular 960 Grid System. It works like 960 but uses percentages for the grid rather than static pixel sizes.

10 Tools to Create Your Own Grid

A framework or grid system may not be the best option for every designer or developer. But there are some tools out there to help you get started even if you want to design your own PSD grid.

Conclusion

Are you ready to design with grids yet? Now that you have the tools what are you waiting for?

What grid system is your go-to choice? Share it and your website using that grid system with us in the comments.

Newsletter

6 Comments
  1. Andreas Heimann Sep 23, 5:21 pm

    I usually use ungrid because it has no fixed number of columns.. together with a .wrapper-class you could do a 1140, a 960, every possible grid..

  2. Kevin Lozandier Sep 23, 6:10 pm

    The Susy and Singularity grid systems are well worth mentioning as well.

    Unlike many of the grid systems mentioned in this article that are a symmetrical grid system or asymmetrical , Singularity and Susy as simple or complex as you want them to be to create symmetrical or asymmetrical grids.

    More importantly, they both allow you to create grids based around the content or based on the ratios of the most common content your design should take account easier than any grid system mentioned in this article.

    They can be implemented without classes or they can be implemented effortlessly, thanks to the power of Sass, to have whatever class or attribute naming convention that suits your project.

    Both have superior, out-of-the-box debugging tools you can implement in your stylesheet to analyze the accuracy of the grid made by either of them is in fact supporting the content that must be aligned with the grid (or vice versa).

    Finally, both allow you to immediately implement or experiment with traditionally desirable grids and white spacing techniques well known to appreciators of design and front-end design for years such as the golden-ratio, the isolate method, and so on.

    If a designer isn’t scared of getting into Sass in order to use the either of them , a designer or developer will find it hard to find better grid frameworks than Susy or Singularitygs.

    • Kevin Lozandier Sep 23, 6:24 pm

      I will also add symmetrical grid systems such as Foundation, Bootstrap and lightly adjustable asymmetrical grid systems will often leave the users of them to unknowingly or knowingly be in positions where they are creating layouts with notorious layout crimes such as 7s, drifts, and pinches.

      These layout problems are often unavoidable in grid systems such as Foundation or Bootstrap, break away from such grid systems for a particular component, or you have to unnecessary spend unnecessary time solving them with altered numbers of your grid that may break the consistency of the use of white space you originally desired to the extent you have adjust other components as a result to partially solve the problem.

      That’s not fun at all.

      Such things hardly exist with Susy and Singularity and are far more solvable and manageable.

  3. Daniel Genser Sep 24, 10:03 am

    I’ve been loving http://jeet.gs.

    • Kevin Lozandier Sep 24, 12:50 pm

      Jeets is great if you want similar functionality of Singularity w/o Sass (like being able to use Stylus since the creator valued that) and the framework provides alternate column syntax you may like better than it.

      The creator also has done tremendous effort lowering the barrier of immediately using the grid system with things like Mixxture generators primarily for designers more familiar with class-centric grid systems such as Boostrap and Foundation.

  4. Jörn Sep 30, 6:57 pm

    I’ve worked with Susy http://susy.oddbird.net/ in my latest SASS projects and loved the syntax and infinite possibilities! You’re creating your grids without touching the markup and adding col-* classes all over the place…

Leave a Reply

*
* Minimum length: 20 characters

Download Web Design Freebies & Resources

psd

Please Confirm Your Email!