Remove outside gutters in Neat 2

Question

I've upgraded to Bourbon Neat v2 which includes the addition of gutters on the left and right side of the container grid.

In v1 I could use block-collapse in the span-columns mixin to eat the gutters either side of the element, however, in v2 this mixin has been removed. There is a grid-collapse function in v2 but that doesn't quite work as I expected. My current markup is as below (reduced for brevity):

.wrapper {
  @include grid-container; // columns: 12, gutter: 1rem
  @include grid-visual(lime);
}

.sidebar {
  @include grid-columns(2 of 12);
}

.container {
  @include grid-columns(10 of 12);
}

How do I remove the outer gutters, an collapse the gutter between column 2 & 3 so that my sidebar and container sit next to each other?

Answer 1

You were correct in looking at the grid-collapse mixin to take care of this.

To do a flush grid like the one you described, your markup would be:

.wrapper {
  @include grid-container;
  overflow-x: hidden;
}

.wrapper-inner {
  @include grid-collapse;
}

.sidebar {
  @include grid-column(2 of 12);
}

.container {
  @include grid-column(10 of 12);
}