To be fair, you cannot design a useful grid system where the HTML is void of layout info. I mean, sure you can do something like this:

  <div class="features>
     <div class="feature">...</div>
     <div class="feature">...</div>
     <div class="feature">...</div>
  </div>

But the problem with the above is that you can't easily distinguish between the three features. They are all the same, unless you do some type of "first feature is 2x the size". So you end up with code like this instead:

  <div class="features>
     <div class="feature feature-primary">...</div>
     <div class="feature feature-two-images feature-narrow">...</div>
     <div class="feature feature-last-no-thumbnail feature-small hide-on-mobile">...</div>
  </div>

There isn't really anything semantic about the added stuff (except maybe the feature-primary class). You end up trading off between custom class names for every use case (ephemeral-photographic-feature) with all types of custom rules, or you end up saying "screw it, I'll just have semi-semantic markup that directly affects layout".

I am also starting to think that at some point semantic markup starts benefiting search engines much more than anyone else. After all the average user with credit card in hand has no idea if the credit card field has a class of "FormFieldCCNum__1" or "credit-card". The developer does, and that's who these tools should be optimized for.