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

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

Могу поспорить, что вы можете переопределить желоба, просто установив поля на 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;
        }
     }
  }

Answer 3

Вы также можете достичь того же, не добавляя никаких дополнительных 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>