Let’s first establish that by “CSS Grid systems,” you mean CSS grid frameworks like Foundation, 960, and Bootstrap. Because I think many developers nowadays use grid systems within their CSS, especially now that they can leverage preprocessors like Sass and Less … but that’s a whole other story.

Frameworks

So to answer your question, CSS grid frameworks are best used to aid in rapid front-end development; projects like HTML prototypes and proof–of–concept level work. I don’t advocate using prepackaged CSS frameworks for production-level code, because they rely heavily on non-semantic classes in your HTML which can quickly become as difficult to manage as inline styles.

Cons

These grid frameworks can also be restrictive, with predefined widths and lots of overhead in terms of learning and modifying. Sometimes the amount of time you think you’ll save using a framework is spent ripping out all the unnecessary files and code you don’t actually need (or want) for a production site.

Pros

On the positive side, frameworks — the good ones at least — provide plenty of documentation. So if you plan to hand off templates to a client for back-end integration, you can also pass along the framework documentation, in some cases eliminating the need to create a style guide. Typically, these frameworks are also built with cross-browser compatibility in mind, so in the same way jQuery is a JavaScript library that neutralizes bugs across browsers, CSS frameworks often do the same.

When to Use (and Not)

I would happily use a framework (my framework of choice at the moment is Foundation) for prototyping wireframes for a new site, or for a temporary microsite that needs to be quick and dirty and live as soon as possible (we’ve all been in those situations). However, in my opinion, a well thought-out custom grid system is generally a much better approach for primetime, enterprise-level work. Because you or your team created the grid, it will be nimble, light and written exactly to the project’s specifications.