Bourbon Neat - Full width outer-container with not gutter

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!

score 1 · Answer 1 · answered Jun 06 '16 at 22:21

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.

score 0 · Answer 2 · answered Jun 06 '16 at 12:41

0

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

answered Jun 06 '16 at 12:41

Mike Harrison

1,020
2
15
42

I don't think this is a good use case for `block-collapse`. I was actually dealing with just today. The third column will be a bit thinner than the other two due to its status as `:last-child`. – alexbea Jun 06 '16 at 22:15
Ah yes well spotted - I should have checked this before posting. Your solution looks like the best one – Mike Harrison Jun 07 '16 at 09:39
I did the exact same thing just this week, really wanting `span-columns` to do the trick since it seemed the "right way." It's one place where the documentation could be a bit clearer. – alexbea Jun 08 '16 at 12:29

Bourbon Neat - Full width outer-container with not gutter

2 Answers2