Search code examples
mathlayoutsassgridsusy

Susy counts column width and gutters wrong

My susy layout is wrong by 1 pixel and I don't know why:

$susy: (
  columns: 12,
  container: 1546px,
  gutter: 26px,
  column-width: 105px,
  global-box-sizing: border-box
);

It returns 104px width columns with 27px gutters, the container is as set. Any pointers?

Solution

  • There are a few issues here:

    • The gutters setting (plural) takes a ratio, rather than a length. To get your proper ratio based on the length, you can use division: gutters: 26px/105px
    • By default, Susy output is in relative %, even if you define the grid using px. If you want Susy to output exact px-lengths, you should add math: static to your settings. In that case, you should also remove your container size, and let Susy calculate that for you based on columns and gutters.