Using a grid system when you’re designing helps you keep things organized and also lay them really clean and precisely, based on a type of measurement. Basically, a grid system is a structure made of a series of horizontal and vertical lines which intersect and are useful for arranging content.
The 960 fixed width grid is one of the most used grid systems in traditional web design. This grid sistem uses a standard of 960 pixels wide and its purpose is to streamline the design process of web development. You can use 12 column or 16 column method with this grid. You can find it at 960.gs .
Since responsive web design is the new concept of developing websites, fluid grids were created.
Unsemantic is the fluid successor of the 960 Grid System. Both grids are similar, but Unsemantic is based on percentages, instead of being a set number of columns. For example, for a 50% wide column, simply use class=”grid-50″.
Unsemantic can be seen as the 960 version 2.0 with full responsive ability, wich means that the layout of the website will change accordingly to the user’s device screen resolution. Is also easy to translate into CSS. You can find it at unsemantic.com.
A better Photoshop grid for responsive web design is also known as the thousand pixel grid because it’s based on 1000 pixels wide system. This makes the calculation of percentages for column widths very easy. For example, a 150px column inside a 1000px container is 15%. This grid was developed by Elliot J Stocks and you can find it here
Lemonade is a new grid system which is based on the full width of the browser. Is more suited for a hybrid designer developer rather than for a designer that uses Photoshop. You can find it at lemonade.im
The 1200 pixel grid system is great for designers that use Photoshop. It allows you to specify column width, number of columns and gutter width. This variable grid system is an easy way to generate an underlying CSS grid for your website. You can find it here
Simple Grid is a simplistic grid system that was created for developers who want a barebones grid. It works well with 1140px layouts but you can adjust it to any size of layout. With fluid columns, Simple Grid is responsive down to mobile. You can find it here
Hello there!
I hope you find this post useful!I'm Mihai, a programmer and online marketing specialist, very passionate about everything that means online marketing, focused on eCommerce.
If you have a collaboration proposal or need helps with your projects feel free to contact me. I will always be glad to help you!
