Better Background Grids?

[atom2ueki]

I found that what ever how you setup Susy, even in youtube/web tutorial, when open debug image, there is always a little gap there in the right-hand side, but when you slowly resize the browser, it will disappeared, and come again like a loop, is it caused by the gutter setting? because the ratio cannot be divided into integer

[mirisuzanne]

Yes, this is a known browser bug in handling sub-pixel rounding on background-images as noted in the documentation. This is why we are considering an svg alternative in #440.

[signalwerk]

In chrome it's kind of unpleasant to debug. I used the following code to draw the grid for the whole 100% and then it looks perfect:

$susy: (
  columns: 7,
  gutters: 1/6,
  math: fluid,
  output: float,
);

@mixin grid-column-gradient($values...) {
  background-image: linear-gradient(to right, #{$values});
}


@function gradient-stops($grid-columns) {
  $transparent: rgba(0,0,0,0);
  $color: rgba(0,0,0,0.07);

  $column-offset: 0;

  $values: ($color 0);

  @for $i from 1 through $grid-columns {

    @if $i != $grid-columns  {
      $column-offset: $column-offset + span(1);
      $values: append($values, $color $column-offset, comma);
      $values: append($values, $transparent $column-offset, comma);
      $column-offset: $column-offset + gutter();
      $values: append($values, $transparent $column-offset, comma);
      $values: append($values, $color $column-offset, comma);
    } @else {
      $column-offset: $column-offset + span(1);
      $values: append($values, $color $column-offset, comma);
      $values: append($values, $transparent $column-offset, comma);
    }
  }

  @return $values;
}


.container {
    /* mark */
    @include grid-column-gradient(gradient-stops(7));
}

Based on that code:
_visual-grid.scss

[mirisuzanne]

@signalwerk That's how we used to do it, but we had exactly the same problem with that technique as our current one (and a lot more code). Chrome must have fixed the one bug, and not the other? Very strange. I'll re-open this for a patch.