Twitter Flickr Tumblr Pinterest

1322px Grid

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