Using CSS Grids Made Easy – 960 Grid Systems


When developing a website, one of the crucial aspects to aid in easier and more semantic coding is Grid Systems.


They also help take control of how your website is structured, visually.One of the best solutions to making a start on a structured website (providing you know a little HTML/CSS) is to use a grid system. A grid system lays the foundation for layout of content and provides a stable basis for implementing complex design layouts with ease. Everything is structured within separate containers allowing for complete control over the look and feel of the site. It also helps with the coding, as everything is in clear categories or sections and is easily identifiable providing strict naming of div structures have been adhered to.

Once the design is mocked up you can judge on how the elements will be structured correctly and break it down into columns. The most common size specification width wise for a grid system is 960 pixels. This is because most modern computer have a display resolution of 1024 x 768 (1024 pixels been the horizontal measurement), which allows any website within the size of 960 pixels to be displayed in full, without requiring the user to scroll horizontally. Also as 960 is devisable by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480 it makes it the perfect size for displaying content correctly on all manner of devices.

There are two ways in which to get a grid system:

1, Create one yourself


2, Use a ready-made one!


To save time, and to give us a better insight to a working example of how things work we are very luck to have many ready-made/generator tools that have been used by lots of people all over the internet. Without further a do, two of our favourites;


960 Grid System

”The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem”

960gs Using CSS Grids Made Easy   960 Grid Systems


gridr buildrrr

“A simple to use generator, with custom selectors to enable you to generate that perfect grid system”

gridr Using CSS Grids Made Easy   960 Grid Systems



Once you have your Grid System downloaded, the next step is to code your design into the structure of the website. You’ve probably already got your visual/ideas/sketches for the look of your site but you also have to ‘Slice’ your image and then code it ‘semantically’ using the grid system. This is one aspect of creating a ‘Good Website‘. Also remember that you will also have to adjust the css for mobile devices.

Look out for more website tips & tricks only at Yoba.




    • August 13, 2014
    • Reply

    Hello There. I found your blog using msn. This is a really well
    written article. I’ll be sure to bookmark it and come back to read
    more of your useful info. Thanks for the post.

    • September 8, 2014
    • Reply

    I have been exploring for a little bit for any high-quality articles or weblog posts on this
    kind of house . Exploring in Yahoo I at last stumbled upon this web site.Studying this information So
    i am satisfied to convey that I’ve an incredibly good
    uncanny feeling I discovered just what I needed.
    I such a lot indisputably will make sure to do not omit
    this site and give it a look on a continuing basis.

Add a comment