CSS Zen Garden was more close to art than to real world production work. It existed to draw a line between the old days' table-based layouts and what CSS brought to the table.

In those days CSS was perceived as not powerful and flexible enough, and capable only of boring boxy layouts (which is in fact the favoured aesthetic nowadays) and CSS Zen Garden and other similar sites existed to disprove that notion.

Also, some of the core ideals of the time, like obsessing over having 100% semantic markup and the ability to change styles without having to touch the markup turned out not to be that important.

And, lastly, if you look at the provided source in CSS Zen Garden you can see that it has a lot of DOM affordances like classes, IDs and even some extra markup to make sure that the CSS author had everything she needed to make his design work.

source: I got a design published in the garden a long time ago http://www.csszengarden.com/110/

Nothing went wrong. The philosophy behind CSS Zen Garden is alive and well in some quarters, and in others it's not. It's the CSS world's version of EMACS vs VIM.

Separation of different concerns.

The devs convey intent to the stylers through classes.

Projects got bigger.

When you have 5 front-end developer working on and off on a project, you can't simply throw media queries around.

Hence the adding of classes. With classes based grid system, I can setup my grid (as the front-end guy) and have the back end guys simply add the right class and the website will stay responsive.

That being said, the classes are only there for the skeleton of the website. The rest of it is going to be done via the CSS itself.

Let's use Zurb's Foundation as an exemple. I can have the entire skeleton of the website done using the classes. This allow everyone to share the same base and this makes sure that the website will always be responsive.

When I need to do some extra styling on the element itself where classes would not make sense (and would break the philosophy behind good CSS), I simply thrown in @include grid-column(4); in my Sass code. This way, I have all the power of the class based grid but only in the CSS and not in the markup. (this is equal to doing class="row-4")

What went wrong: CSS codebases became unmaintainable over time.

I could go into more detail, but I think most people will concur.

The appification of the web is what went "wrong". For non-app sites, a bloated DOM-grid is probably a bad choice (though there was a lot of interesting experimentation with Compass/Blueprint like a decade ago). For webapps, it may be a good choice.