html - Gutter between divs

Question

See the following codepen for what I currently have: https://codepen.io/anon/pen/GjWYPO

<div class="container">
    <div class="col-1-3 bg-blue">blue left</div>
    <div class="col-1-3" style="font-size:0px;">

        <div class="col-1-3 bg-green">green 1</div>
        <div class="col-1-3 bg-green">green 2</div>
        <div class="col-1-3 bg-green">green 3</div>

    </div>
    <div class="col-1-3 bg-blue">blue right</div> 
</div>

My question is, looking at the codepen, how do I create a gutter between the green cells. My research points to using negative margins and padding, but I cant get it to work at all. Something like described here: http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

My requirements are, not! to create any more div's. I dont want to create a "row wrapper", i would really be happy if its solvable with the html that is in the current pen. I dont mind, and guess its part of the solution, to create a "row class" and apply it to the parent cell (here with id 'batman'), holding the green cells.

Second requirement is, that even though the codepen example uses 3 cells, that the solution works on any amount of cells. So it cant be using nth-child

and third, I would really really prefer to not! use flex to solve this problem.

Ignore the container class and the font-size:0 thing, its only a temporary fix to remove white space when using inline-block. My real code uses php minification.

I hope this make sense. Below is a picture how I want the result to look like:

Would be grateful for any help, thanks in advance!

==edit==

Added requirement to not use flex.

Answer 1

I think adding this to your css, would do the job for you.

.col-1-3.bg-green{
    width:calc(100%/(3/1) - (3-1)*2px);
  margin:0px 2px;
}