The new 960: The 1920 Grid System

I recently read an article that said web developers need to stop designing to the 960px grid system. The writer thinks responsive design should be used for more than just downsizing a website to mobile, but also enlarging it because there are so many large monitors out there now that will just leave a width restricted design floating aimlessly in the middle of a sea of whitespace.

Whilst I don't think that the web needs to be fully fuild to suit a large screens, the article does make a good point. That is why I've created a new version of the 960 grid, except this one is 1600px 1920px wide and includes vertical rythmn rows of 18px. You can download it below. Originally I made the grid 1600px wide, but upon further reflection I updated it to 1920 because it is a common screen size and exactly double 960.

When I design to the 960 grid I use the 12 column varient which splits into three columns nicely, each 320px wide (300 with margin). The new 1600 1920 grid that I've put together is 24 columns and can be divided up as you please.

Of course 1920 is still too wide for many screens, but in the days of media queries we can simply adapt. I suggest your base stylesheet still targets a 960px width, but include media queries to enlarge the website for those bigger screens and use my 1920 grid to arrange the design in Photoshop.

Download the 1600 grid PSD for Photoshop.

Download the 1920 Grid PSD for Photoshop with screen guides.

Download the 1920 Grid PSD for Photoshop with column/row guides (Credit: Lea).

CSS Skeleton

Someone suggested a CSS framework/skeleton for this grid system. I don't personally use too many frameworks so I don't know how this stacks up in comparision but maybe some people will find it useful.

I haven't fully tested it yet but I do plan on using it myself and may add to it later. I also haven't documented how it works yet either. Just try it and see.

View the SCSS

View the CSS

Article Reference: Life Beyond 960px: Designing for Large Screens

Comments

  • DigitalBiscuits

    18 Apr 2013 02:54:50

    Thanks a lot for these. Much appreciated man.

    Would be great if they also had photoshop guides setup.

    Cheers,
    Oisin

  • Luke Franklin

    18 Apr 2013 08:16:51

    That’s a good suggestion. I’ll update the PSD soon. Thanks Oisin.

    Luke,

  • Luke Franklin

    18 Apr 2013 15:08:27

    I’ve updated the PSD to include Photoshop guides and some masks for various screen sizes.

  • DigitalBiscuits

    18 Apr 2013 23:24:13

    Thanks!
    These are perfect now, and the screen size masks are just the cherry on the icing.

    Cheers,
    Oisin

  • Rafael Trinidad

    01 Jun 2013 02:12:47

    Hello Luke. Thanks for posting this. Ive been recently researching which method to start our company on. I want to future proof and though a 1920 approach might be good for our heavy content-driven sites. I plan to hand your psd off to our designer, however, would you happen to have a css scheme that goes with it? Id like to match the columns and gutters youve got going on here.

    Thanks!

  • Luke Franklin

    01 Jun 2013 09:00:35

    Rafael,

    I’m guessing you mean a CSS framework of sorts. I don’t have anything like that yet. I might think about building one though.

    What sort of things would you like to see a CSS scheme do? Do you have any examples of similar schemes?

    Cheers,
    Luke

  • Rafael Trinidad

    08 Jun 2013 00:06:47

    Hi Luke. Not necessarily a framework, but the matching css counterpart to this e.g. Skeleton (http://www.getskeleton.com/).

  • Luke Franklin

    09 Jun 2013 19:41:19

    Rafael,

    I’ll see if I can get a chance to put something together from the existing CSS used on some of my websites. If you come up with your own before then I’d love it if you sent me a copy!

    Kind Regards,
    Luke

  • Luke Franklin

    13 Jun 2013 14:03:28

    Hello everyone,

    As per Rafael’s suggestion I have put together a bit of a responsive skeleton SCSS and CSS file, included above. I’m not sure how useful it may be because my layout practices may be a bit different to most. I suggest just taking a look through it.

    Kind Regards,

  • Afonin

    04 Feb 2014 18:26:47

    Awesome grid, Luke!

  • Lea

    26 Feb 2014 14:10:57

    Hey Luke
    Thanks for this !
    I updated your psd with the photoshop guides setup
    If it can help
    Here is the link : https://www.dropbox.com/s/xmynu4mgzs8e7ay/1920-grid-vertical.psd

  • Luke Franklin

    28 Feb 2014 10:42:33

    Thanks Lea!

    I’ve uploaded it with credit to your contribution.

Leave a comment