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.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

You can add this to your CSS and it should work (tested):

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

.bg-green:last-child{
  margin-right: 0;
}

Edited snippet:

.container{
  font-size: 0;
}
[class|="col"] {
    display:inline-block;
    vertical-align: top;
    position:relative;
    font-size:20px;

}
.col-1-3{
    width:calc(100%/(3/1));
}
.col-2-3{
    width:calc(100%/(3/2));
}
.col-1{
    width:100%;
}
.bg-blue{
    background-color:#42a5f5;
    color:#ffffff;
}
.bg-green{
    background-color:#66bb6a;
  color:#ffffff;
}

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

.bg-green:last-child{
  margin-right: 0;
}

<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>

Just replace "3" with whatever numbers of columns you have and change the margin-right value as you like.

Version with negative margin

Change markup a little bit (similar structure to Bootstrap):

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

And following part in CSS

.children-has-gutters > div {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

.bg-blue {
    background-color:#42a5f5;
    color:#ffffff;
    width:calc((100%/(3/1)) + 15px);
}

.container{
  font-size: 0;
}
[class|="col"] {
    display:inline-block;
    vertical-align: top;
    position:relative;
    font-size:20px;

}
.col-1-3{
	width:calc(100%/(3/1));
}
.col-2-3{
	width:calc(100%/(3/2));
}
.col-1{
	width:100%;
}

.children-has-gutters{
  margin-left:-15px;
  margin-right:-15px;
  width: calc((100% / (3/1)) + 30px);
}
.children-has-gutters > div{
  padding-left:15px;
  padding-right:15px;
  box-sizing: border-box;
}


.bg-blue{
	background-color:#42a5f5;
	color:#ffffff;
}
.bg-green{
	background-color:#66bb6a;
    color:#ffffff;
}

<div class="container">
  <div class="col-1-3 bg-blue">blue left</div>
	<div class="col-1-3 children-has-gutters" style="font-size:0px;">
    
    <div class="col-1-3">
      <div class="bg-green">green 1</div>
    </div>
    <div class="col-1-3">
      <div class="bg-green">green 2</div>
    </div>
    <div class="col-1-3">
      <div class="bg-green">green 3</div>
    </div>
      
  </div>
	<div class="col-1-3 bg-blue">blue right</div>
</div>

Note that you had to add 15px to each blue column, to avoid issue with container width. You can play around and check what happens without it - width of elements in container would be 100% - 30px (negative margin).

Gutter between divs

Sign up