CODEWITHSUNDEEP
cssscss-mixinssusysusy-sass
Neela
Neela

Reputation: 341

Grid size using susy

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?enter image description here

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.

Upvotes: 0

Views: 38

Answers (1)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

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.

Upvotes: 0

Related Questions