Bourbon Neat - Full width outer-container with not gutter - css

Question

Hello,
I'm playing around with Bourbon Neat, and I am trying to do three columns which cover the 100% of the windows width outside the configured grid ($max-width: em(1160)), and without any gutter. Similar to the following image (blue, yellow and green boxes).
So, to make the full width of the section, I don't specify any 'outer-container' and for remove the gutter I add the mixin 'omega' but looks like this:
I quick fix I thought myself is adding width: calc(100% / 3) to the three articles but I think is not the best solution...
Any idea?
Here I'm leaving the code: codepen.io
Thank you!

Answer 1

I do think your width: calc(100% / 3); was just about the right solution. I came across this exact situation in my work today. #mike-harrison's solution is what I tried first, but as I mentioned there, the span-columns mixin makes the :last-child smaller than the others. Issues in Github about that were answered that it was very intentional and your use case is better served with simple percentages.
So here's my solution: http://codepen.io/alexbea/pen/BzozXw;
The key rules are:
section.HomeProducts
+row
article
float: left
// width: percentage(1 / 3)
width: calc(100% / 3)
I used your solution with calc(), which works, though I also included a commented out approach of width: percentage(1 / 3). Most modern browsers do support calc(), but the other would serve older browsers a bit better, I think. The float should take care of any browser variations and is also what Neat uses in the span-columns mixin.
I also included the row() mixin on the parent to clearfix the whole section and make sure the floating doesn't make them disappear.

Answer 2

The way I would do it would be to have a 100% outer-container, and then use block-collapse on the elements inside. I have done a quick pen here:
http://codepen.io/mikehdesign/pen/ZObEdw
HTML is the same as yours, this is my SCSS:
section.HomeProducts {
#include outer-container(100%);
article {
#include span-columns(4, block-collapse);
height: 200px;
background: green;
&:first-child {
background: blue;
}
&:nth-child(2) {
background: yellow;
}
&:nth-child(3){
background: green;
}
}
}