Using CSS Grids Made Easy – 960 Grid Systems

gs-header

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

OR

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.

 

 

One Comment

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

Add a comment