CODEWITHSUNDEEP
csssassgridbourbonneat
andresgl
andresgl

Reputation: 117

Bourbon Neat - Full width outer-container with not gutter

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

enter image description here

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:

enter image description here

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!

Upvotes: 0

Views: 613

Answers (2)

alexbea
alexbea

Reputation: 1370

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.

Upvotes: 1

Mike Harrison
Mike Harrison

Reputation: 776

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

Upvotes: 0

Related Questions