Gutter widths in Susy 2

1.6k Views Asked by At

In beta 2 of Susy 2, is it possible to set gutter widths in the main grid settings like so:?

$susy: (
  flow: ltr,
  math: static,
  output: float,
  gutter-position: after,
  container: auto,
  container-position: center,
  columns: 12,
  gutters: .25,
  !!!!gutter-override: 20px,!!!!
  column-width: 77.5px,
  global-box-sizing: border-box,
  last-flow: to,
  debug: (
    image: hide,
    color: rgba(#66f, .25),
    output: background,
    toggle: top right,
  ),
);

Because it doesn't seem to like it. I need to set explicit widths for columns and gutters for this grid and the container should be determined from those.

1

There are 1 best solutions below

4
On BEST ANSWER

In Susy Next, gutters are set as a ratio (.25) to the column-width (77.5px). Given those settings, Susy can determine the gutter-width (77.5px * .25 = 19.375px).

By saying you want static math, .25 gutters, and 77.5px columns, you have already set the gutter width, and the container can already be calculated. If you like, you can use real pixel values to set your gutter ratio:

$susy: (
  column-width: 77.5px,
  gutters: 20px/77.5px, // same as ".258064516"
);

Gutter-override is not a global setting, and won't help you here. That setting is only for spans, when you want to override the global value. Also, I don't recommend sub-pixel settings. Pixels don't really break down, and fractional pixel declarations aren't handled the same across browsers.