Grids can be used for print, web, drawings, paintings, anything in which a layout is required.
A reliable grid system to use in your web designs (and then carry through to the development phase) helps you to organize the space you have. The grid system is invisible to your user. You can use it in creating layouts for your designs. But, like all rules when designing (and sometimes when developing) rules are meant to be broken. You might not necessarily always need to stick to the grid formation.
On the web, there are many different CSS grid frameworks available to use. As well as many tools available to roll with our own grid systems that we can create ourselves. Continue to use whatever works best for you, and whatever you are most familiar and/or comfortable with.
How Many Columns?
When you are designing a website, you need to be aware of the many different column grids (one column, two, three or multi-columns). Grids are used to organize space and information for the user; it maps out a plan for the overall project.
If you are planning to design a website for a company, you should be aiming for the mobile version first then for the desktop version. The mobile-first strategy is referred to as a content-first strategy. Why? Because your website’s content must be carefully researched and structured to be categorized based on importance. If mobile hits are more of your traffic or 50%, this would reveal higher sales are significantly higher on mobile then.
The small grid will change to the large grid once the screen width hits the main breaking point. Use the small grid to target smalle devices and the large for what are typically desktops and larger screens.
Grid Systems
960 Grid
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions based on a width of 960 pixels. The 12-column grid is divided into portions that are 60 pixels wide while a 16-column is divided into 40 pixels wide. Each column-grid has 10 pixels of margin on the left and right, which creates 20 pixels width gutters between columns.
960px is a good size because it has many factors (whole numbers it can be divided into): 1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, etc. Being able to divide the grid up in this way provides a lot of flexibility for the width of columns, offering a good multi-purpose and reusable grid system.
1200px.com
In January 2010, 1200px, 76% of the computers were using a resolution higher than 1024x768px. All modern monitors (mostly wide-screen) support at least 1280×1024 pixel resolution.
1200 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 40, 48, 60, 80, 120, 150, 200, 240 and 400. It makes it a highly flexible base number to work with. The 1200px Grid System is based on the 960 Grid System of Nathan Smith.
1440px.com
Large amounts of information need to be compartmentalized (divide into sections or categories). Large websites are organized using grids. Space is used to break into chunks of data to control the content better. Start by reviewing any constraints. Take into account screen margins and toolbars, such as navigation as well as the browser window. As with print, web design calls for considering anything that takes up space. In the case of many websites, items to find include ads, videos, and a complex array of heads, subheads, bylines, lists and links. Therefore, clear typographical choices are crucial.
Traditional CSS layouts used fixed-width grids (960.gs) to position the elements. The fixed-width approach no longer works today now that we have device screens ranging from 3 inches to a few feet. Unsemantic is a fluid grid system that is the successor to the 960 Grid System. It works similarly, but instead of being a set number of columns, it’s entirely based on percentages. In a fluid grid design, everything is coded in terms of its relative proportion to the base element. For example, specifying the height and width of each element; it is given a percentage or relative size.
Online Calculators
I became a graphic designer because my math was bad. There are many online calculators that help designers and web developers to calculate their grids. And thankful for these developers.
Gridcalculator was created by Nicolaj Kirkgaard Nielsen, a Danish User Experience Specialist who made all our lives easier with this tool. With this calculator, you can enter your dimensions, and if need be download the Illustrator, Photoshop or other PNG formats.
Gridulator was built by developer David Sleight. Enter your layout width and the number of columns you want, and this calculator will give you all the different possible grids. Download a PNG for your favourite mock-up program.