Grid size using susy

Question

I am trying to create a grid structure using the susy plugins but some reason I am getting an extra space for it.

$susy: (
  gutter-position: after,
  container: 1280px,
  container-position: center,
  columns: 14,
  gutters: 0.6,
  global-box-sizing: border-box,
  last-flow: to,
  debug: (image: show),
  // debug: (
  //   image: show,
  //   color: rgba(#ccc, 0),
  //   output: background,
  //   toggle: top right
  // ),
  use-custom: (
    background-image: false,
    background-options: false,
    box-sizing: false,
    clearfix: false,
    rem: false
  )
);


.region {
        @include span(12 of 14);
        @include pre(1);
}

I want the region div to be exactly 1140px and it is 1140 px when I measure it with those two extra grid space attached in the screenshot. How can I remove those?

If i measure from the extreme right to extreme left the grid is 1140px but if I only start measuring from the dark pink to the last dark pink edge its 1112~1113 px.

Answer 1

From the documentation for the Susy "debug" feature:

Grid images are not exact. Browsers have extra trouble with sub-pixel rounding on background images. These are meant for rough debugging, not for pixel-perfect measurements. Expect the "to" side of your grid image (right if your flow is ltr) to be off by several pixels.

As you adjust the window size, you will find it occasionally snaps into alignment, when the columns divide to even pixel values.

Sub-pixel rounding is only an issue on background images. That won't impact the actual layout.