Fluid full width grid in container - css

Question

What is a simple, preferrably css-only, solution to achieve the following:
Have a grid of divs with fluid widths that always matches the with of the container, without having some space on one side due to the margin of the divs.
All boxes should be in one container.
Here is what i have: https://jsfiddle.net/5g0uwxtx/
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
#container{
width:100%;}
.box{
width: 32%;
height: 0;
padding-bottom: 32%;
float:left;
margin:0 1% 1% 0;
background-color:#CCC;}
I want each row of boxes to stretch exactly to the right side, without left over space.
Thanks!

Answer 1

There are a number of ways, but one of the more commonly seen is using a row based layout with first-child or last-child to control the margins, e.g.
http://codepen.io/anon/pen/MajyaG
<div id="container">
<div class="row cf">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="row cf">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
#container{
}
.box{
width: 32.5%;
height: 0;
padding-bottom: 32%;
float:left;
margin:0 1% 1% 0;
background-color:#CCC;
}
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
.row .box:last-child{
margin-right: 0;
}