Remove outside gutters in Neat 2 - sass

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

Answer 2

just expanding on the top answer, you need to also make sure to include grid-collapse within grid-media declarations when using multiple grids due to the fact that grid-collapse is based on your gutter values for each grid.
.wrapper {
#include grid-container;
}
.wrapper-inner {
#include grid-collapse;
#include grid-media($sm-neat-grid, $md-neat-grid, $lg-neat-grid) {
#include grid-collapse;
}
}
.sidebar {
#include grid-column(1 of 1);
#include grid-media($sm-neat-grid, $md-neat-grid) {
#include grid-column(3 of 12)
}
#include grid-media($lg-neat-grid) {
#include grid-column(5 of 15)
}
}
.container {
#include grid-column(1 of 1);
#include grid-media($sm-neat-grid, $md-neat-grid) {
#include grid-column(9 of 12)
}
#include grid-media($lg-neat-grid) {
#include grid-column(10 of 15)
}
}
by the way, my example is using a modified version of grid-media that allows declaring multiple grids that will share the same values but differ in gutter sizes:
// overrides bourbon-neat grid-media to include more than one grid
#mixin grid-media($grids...) {
#each $grid in $grids {
$_media: _retrieve-neat-setting($grid, media);
$_query: _neat-parse-media($_media);
#media #{$_query} {
$_default-neat-grid: $neat-grid;
$neat-grid: map-merge($neat-grid, $grid) !global;
#content;
$neat-grid: $_default-neat-grid !global;
}
}
}
can't for the life of me remember where I got it from but I've used it in all my projects