Converting layouts to Grid Systems

Welcome to Designers Dairy blog here i have posted how to convert the Psd to Grid base layout


Step1:

 Go to this site http://grids.heroku.com/   u can easily divide your templates into Columns


Step2:

Full Width : 1235px  - > Size of the template full width

Number of columns - > 18 ( it will divide  columns according to width 1214 px;)

Gutter - is nothing but  margin left and  right of the template  (space between two sides of template)

Width  : 1235 - 20 (both gutter 10 +10) =  1215px -1px = 1214px



Step3:

Screenshots

step 5:

breif  explain

Step4:

              Download the grid css File and enjoy working with Grids