sassneat

Remove outside gutters in Neat 2


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

Neat Layout Screenshot

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?


Solution

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