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.

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?

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

回答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