Grid Solution One

Fluid width columns, fixed gutters, no rows. This solution uses font-size: 0 / font-size: 1rem to get rid of the whitespace between block elements (only tested in Chrome). Caveats: em based inheritance will be broken on the grid and reset to the root element's em value for columns. Also, the rem unit is only available in IE9+; note that using rem units is not strictly necessary here (we could use 0/px values, but it would be less flexible for browser font sizing).

by kflorence

HTML

<h1>Test</h1>
<div class="container">
    <div class="column span-1"><p>test</p></div>
    <div class="column span-1"><p style="min-height: 100px">test</p></div>
    <div class="column span-1"><p>test</p></div>
    <div class="column span-1"><p>test</p></div>
    <div class="column span-2"><p>test</p></div>
    <div class="column span-2"><p>test</p></div>
</div>

<p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'? </p>

<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. </p>

CSS

body {
    margin: 0;
}

.container {
    background-color: #f4f4f4;
    font-size: 0rem;
    letter-spacing: -1em;
    margin-left: -10px;
    width: auto;
    word-spacing: -1em;
}

.column {
    box-sizing: border-box;
    display: inline-block;
    font-size: 1rem;
    letter-spacing: normal;
    padding-left: 10px;
    word-spacing: normal;
}

.column p {
    background-color: #ddd;
    margin: 0;
    padding: 0;
}

.span-1 {
    width: 25%;
}

.span-2 {
    width: 50%;
}