XY Grid - SASS - поля / желоба колонн

Question

В настоящее время я строю макет из 4 блоков с помощью Zurb Foundation 6.5.0 следующим образом:

Вот мой текущий код:

.blocks_4 {

    @include xy-grid;
    text-align: center;

    div {
        @include breakpoint(small) {
          @include xy-cell(12);
        }

        @include breakpoint(medium) {
          @include xy-cell(3);
          // @include xy-cell(3, $gutter-output: false);
        }

    }
}

Я хотел бы удалить белые желоба между блоками (я нарисовал красные стрелки, чтобы указать их на моем скриншоте), чтобы они слипались и использовали всю ширину страницы.

Как мне добиться этого с помощью SASS? В документации SASS Foundation действительно отсутствуют некоторые примеры ... Я пытался использовать $gutter-output: false, но он не работает.

Answer 1

Глупый я. Ответ был прост:

@include xy-cell(3, $gutters:0);

Answer 2

Вы также можете достичь того же, не добавляя никаких дополнительных SCSS (что увеличит вес скомпилированного CSS-файла вашего приложения / сайта), и вы просто используете XY-сетку Foundation с HTML:

<div class="grid-x text-center">
  <div class="cell medium-3">3 cells</div>
  <div class="cell medium-3">3 cells</div>
  <div class="cell medium-3">3 cells</div>
  <div class="cell medium-3">3 cells</div>
</div>

Answer 3

Разве желоб не установлен на родительском элементе (/ контейнере) вместо дочерних элементов (/ клеток)?

Могу поспорить, что вы можете переопределить желоба, просто установив поля равными 0, например:

.blocks_4 {

    @include xy-grid;
    text-align: center;

    div {
        @include breakpoint(small) {
          @include xy-cell(12);
        }

        @include breakpoint(medium) {
          @include xy-cell(3);
          margin-left:0;
          margin-right:0;
        }
     }
  }