Tips & Tools for Grid-based Layouts

Developing a vertical (and responsive) grid can help maintain consistency in website design and ease the creation of responsive layouts.

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.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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
Responsive Grid System: Fluid grid CSS framework with 12, 16 and 24 columns plus media queries for all standard devices.

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

Gridpak
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: 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: 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
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
Responsify: Easily generate your own responsive grid template and preview it on different screen sizes with this online tool.

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

Fluid Baseline Grid
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: 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.

Carrie Cousins

Carrie Cousins has more than 10 years experience in the media industry, including writing for print and online publications, and design and editing. Carrie is also a sports fanatic and spends way too much time planning football and basketball trips and obsessing over stats.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 21

Comments are closed.
  1. Great article on grids! I knew most of them but some of them are new to me. I might have to give them a shot and see if they are a better fit for me. Thanks for the info!

  2. Great article. Thanks for the extensive list of grid/responsive frameworks, more than i knew about. You left out Foundation http://foundation.zurb.com/. I think its pretty new and looks very promising with saas being the css processor.

  3. You forgot a gr8 addition to these tools is JQuerin Grid Builder ..Its real easy to setup..gives semantic code
    Try It

  4. Awesome! this article comes just in time, I’ve been planning on starting with responsive layouts recently 🙂 This is going into my bookmarks 🙂
    I love Tympanus <3

  5. What about Taiga Boilerplate? It’s a semantic grid in SASS.
    You basically include a mixin on a div, article or section (or whatever you want). So you don’t need classes like span-8 or col-4.

    Taiga works with 48 fluid columns, the width of those 48 columns are based on the maximum width of the container.
    To setup your grid (let’s say an article on the left and an aside on the right) we could do the following:

    ‘article { @include grid(36, 1); }’ (this makes the article 36 columns and a column margin on both sides)
    ‘aside { @include grid(12, 1); }’ (this makes the aside 12 columns and a column margin on both sides)

    And you can use padding and border in the article or aside, because Taiga uses box-sizing: border-box; This means you can prevent to much nesting for rows etc. Also everything else works with em units, which makes it very easy to adjust the whole size of the website.

    http://taigaboilerplate.com/

    • Yes, I´d like to double that: I built a website with foundation lately and found it easy to deal with, providing many extras like tabs, toggles, tooltipps… and even a slider (orbit). Superb!

      And there´s another framework I´d like to mention here: Inuit, which provides a grid-builder on the site, and “igloos”, plugins to extend the framework (one of those makes the grid work even in bad old IE6!).

  6. Thanks for the sum-up and the tips. Gonna use one of those or my next project.

  7. Yup, Foundation has the best GS. And it’s better than Bootstrap also as a framework, IMHO (partly because it uses SASS instead of LESS).

  8. Yes, in my opinion the best Grid System / Framework is Foundation3 from Zurb!! Better to handle than Twitter Bootstrap!!

  9. Great article – however, I didn’t quite understand your comment about sticking to a max of 12 columns? I’ve used e.g. 24 columns for more flexibility when laying out pages (combining groups of grid columns into layout columns). It can get a bit complex, but provides almost no limits to how a page can be laid out 🙂

  10. Awesome collection Carrie, is there any easier online tool to create empty grid and allows to enter the items in the grid?