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