It doesn't necessarily have to be semantic, but your visual styling should be in your style sheet. I'd do the following to achieve http://i.stack.imgur.com/cuCY0.png (assuming box model border box):
.story-large { width: 50%; @include scut-ratio-box; }
.story-small { width: 25%; @include scut-ratio-box; }
etc. I actually did something similar in production creating the Microsoft Surface 2 launch site in 2013: http://mikemaccana.com/images/work/screenshots/uncompromise-...
Good call, although I would disagree with the "objectively better" :-)
I'd recommend using a semantic layout when you have an "application website", like gmail, github or twitter. The layout is strong, and the content needs to lay within each layout block. For this specific design problem, I think that the semantic layout is a good design pattern.
But sometimes the problem is different. Sometimes you have a more "editorial" approach, where you need some specific layout (this is a good example: http://stackoverflow.com/questions/24060704/achieving-a-comp...). Trying to define that grid semantically is nearly impossible! And the problem get worse when that grid doesn't repeat anymore, and the next one is slightly different :-(. In this circumstances, I'd suggest using an explicit grid system.
There's a myth in web development that says: "If you have a good semantic markup, you can achieve any design layout with CSS". This is absolutely false! This kind of myth usually comes from backend developers after seeing csszengarden. Sometimes you need to add some html tags like divs (that are harmless, as they don't have any semantic weight). Don't touching the html will mean going under a CSS hell with hacks and cross browser issues.
Does this sound like bullshit? What are your thoughts?
Cheers!