Remove outer gutters in Neat 2

I upgraded to Bourbon Neat v2 , which includes adding gutters on the left and right sides of the container grid.

Neat Layout Screenshot

In v1I could use mixin block-collapsein span-columns to have gutters on both sides of the element, however, v2this mixin was removed. There v2is a grid-collapse function in it , but it is not quite as I expected. My current markup is below (shortened 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 to remove external gutters, fold the tray between columns 2 and 3 so that the side panel and the container sit next to each other?

+4
source share
1 answer

, grid-collapse mixin, .

-, , , :

.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);
}
+4

Source: https://habr.com/ru/post/1671592/


All Articles