why are we taking grids approach

In graphic layouts grids are used to ensure clean horizontal spacing of elements down the length of a layout, think of a newspaper where content lines up vertically and it just looks 'nice' or 'appropriate', consistent horizontal spacing, gutters, etc... then for web, make those grids fluid using 'em' or 'rem' or 'percentage' units and then your content looks good across many devices.

Grids make it easier to make everything 'line up'.. and not just on the extreme left and right sides of the page. Also, many websites are using grids for their layouts, but if you're viewing the html source of that page it's not always easy and obvious to determine this (unless it's zurb's foundation and almost all of them use the exact same markup).

thanks ! but one can implement grids when we start the project from scratch. But in many cases, you get legacy code, wherein you have to style based on existing CSS. How can we use grids in those cases?

Very true.

It would just need to be rebuilt from what it sounds like. Keep the code for things that need it like button and font and colors, but take any styling that deals with layout, delete it, then bounce between the html and css and add the grid classes that build it back into the layout that you need. I'm not so sure that I'm actually answering your question and for that I apologize, but then again the workflow might also depend on the individual rebuild and how the initial content was structured...

yes i am getting you up to some extent. And i also know it is really tough to answer what i asked, that being is very generic and depends from site to site. Anyway thanks for your response.