1322px Grid


Now that 1366 is quickly becoming the most popular screen width, a 1322px grid with 22px gutters is ideal because you can divide the space into 24, 20, 12, 10, 8, 6, 4 and 3 columns. This easily allows for the rule of thirds, and also leaves you with 22px margins on each side of the grid.

Seems like we’ve finally hit the point where we can work in a nice big canvas. Would be great to have a responsive CSS framework built around this configuration. Anyone up for the challenge?

Here’s a quick PSD I created with the columns.

16 Comments on "1322px Grid"

  • zx says

    In one hand it’s nice. On the other you have responsive design where fluid columns seems better to fit whole canvas.

  • I may have to put something like that together.

  • Diego says

    naaaah, not fitting with my 5px system

  • Eugene says

    Actually, according to statistics you have provided 1280 is still the most popular screen width.

  • 1366 is still not the most common, but it will be very soon. Also, if you include all sizes larger than 1366, then you have a good chunk of the market.

  • logo says

    This is a very successful new popular screen size. I’m trying this pixel settings. Thanks for sharing.

  • Lewis M says

    Thanks for sharing. One issue according to those stats is that around 38% are below the 1322px width mark. While this will slowly reduce, it is a strong issue. Also, the rise of phones and tablets, where do they factor in this? I am more inclined the ignore some restraining factors, and I much prefer a fixed grid (and bigger is better, so this is good news), but maybe fluid is the future to some extent?

  • Georgi says

    Nice. Now, explain that to the client…

  • Interesting. I wonder how long it will take before it comfortably becomes the dominant lowest common denominator. Unless you’re designing around flexible layouts I don’t think its 100% viable yet to roll out on a massive scale.

  • john says

    Will give this a try, always good to adapt

  • Dennis says

    Actually 10 and 20 columns won’t work, but some other ones you didn’t mention will. Here is what I found:

    24, 21, 16, 14, 12, 8, 7, 6, 4, and 3 columns.

  • Hi Dennis, you didn’t subtract the space for the 22px gutters. When you do you’re left with 1080px. You can divide this into 10 and 20 evenly.

  • Patrick says

    Very nice, but I really miss your infinite scroll.

  • I did a quick experiment with this grid using 12 cols. http://andrewlohman.com/1322/

  • Excellent idea Mr Antonio!

    I will try it! Thank you for the .PSD!

  • A couple of years ago I was dreaming about the day when something like 1322px would become “standard”. Nowadays, after working on a couple more websites, I’ve changed my mind and think that 1024px is still plenty of space for most sites. Content heavy sites are a different story, of course.