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