1322px Grid


Now that 1366 is quickly becom­ing the most pop­u­lar screen width, a 1322px grid with 22px gut­ters is ideal because you can divide the space into 24, 20, 12, 10, 8, 6, 4 and 3 columns. This eas­ily allows for the rule of thirds, and also leaves you with 22px mar­gins on each side of the grid.

Seems like we’ve finally hit the point where we can work in a nice big can­vas. Would be great to have a respon­sive CSS frame­work built around this con­fig­u­ra­tion. Any­one up for the challenge?

Here’s a quick PSD I cre­ated with the columns.

16 Comments on "1322px Grid"

  • zx says

    In one hand it’s nice. On the other you have respon­sive design where fluid columns seems bet­ter to fit whole canvas.

  • I may have to put some­thing like that together.

  • Diego says

    naaaah, not fit­ting with my 5px system

  • Eugene says

    Actu­ally, accord­ing to sta­tis­tics you have pro­vided 1280 is still the most pop­u­lar screen width.

  • 1366 is still not the most com­mon, 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 suc­cess­ful new pop­u­lar screen size. I’m try­ing this pixel set­tings. Thanks for sharing.

  • Lewis M says

    Thanks for shar­ing. One issue accord­ing 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 fac­tor in this? I am more inclined the ignore some restrain­ing fac­tors, and I much pre­fer a fixed grid (and big­ger is bet­ter, so this is good news), but maybe fluid is the future to some extent?

  • Georgi says

    Nice. Now, explain that to the client…

  • Inter­est­ing. I won­der how long it will take before it com­fort­ably becomes the dom­i­nant low­est com­mon denom­i­na­tor. Unless you’re design­ing around flex­i­ble lay­outs I don’t think its 100% viable yet to roll out on a mas­sive scale.

  • john says

    Will give this a try, always good to adapt

  • Dennis says

    Actu­ally 10 and 20 columns won’t work, but some other ones you didn’t men­tion will. Here is what I found:

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

  • Hi Den­nis, you didn’t sub­tract the space for the 22px gut­ters. 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 infi­nite scroll.

  • I did a quick exper­i­ment with this grid using 12 cols. http://​andrewlohman​.com/​1​3​22/

  • Excel­lent idea Mr Antonio!

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

  • A cou­ple of years ago I was dream­ing about the day when some­thing like 1322px would become “stan­dard”. Nowa­days, after work­ing on a cou­ple more web­sites, I’ve changed my mind and think that 1024px is still plenty of space for most sites. Con­tent heavy sites are a dif­fer­ent story, of course.