Не получается заставить использовать сточную канаву в 'px' в математическом режиме: статический режим

Question

Я хочу создать фиксированную негибкую очень чертову статическую сетку размером 1200 пикселей. Итак, я понял, мне нужно 90px для ширины столбца, 12 столбцов, 10px желоба и 1200px максимальной ширины.

Хорошо... ниже приведены мои настройки, и это выдает ошибку "Недопустимая нулевая операция: 11 раз нулевая"

$susy: (
  flow: ltr,
  math: static,
  output: float,
  gutter-position: after,
  container: auto,
  container-position: center,
  columns: 12,
  gutters: 10px,
  column-width: 90px,
  global-box-sizing: content-box,
  last-flow: to,
  debug: (
    image: show,
    color: rgba(#66f, .25),
    output: overlay,
    toggle: top right,
  ),
  use-custom: (
    background-image: true,
    background-options: false,
    box-sizing: true,
    clearfix: false,
    rem: true,
  )
);

style.scss>

    @import "grids";

body{
    @include container($susy);
    max-width: 1200px;

    border: solid thin red;
    height:10px;

}

Answer 1

Вы должны указать желоба пропорционально вашим столбцам.

В этом случае:

gutters: 1/9,

Конечный результат (ваши столбцы 90px) будет иметь ширину желоба 10px. Вы можете указать ширину желоба в пикселях, выражая ее в пропорции.

Согласно документам, вы можете указать ширину желоба в пикселях, указав также ширину столбца. Например:

gutters: 10px/90px

Хотя результат точно такой же. И если вы введете значение, которое не совпадает с шириной столбца, вы получите не пикселную ширину, а соответствующую дробь.

Итак, имея:

column-width: 100px,
gutters: 10px/50px,

оставит вас с желобами шириной 20 пикселей. Из-за математики.:)

Перо показывает это работает здесь

И, наконец, ваш макет имеет ширину 1190 пикселей, а не 1200 пикселей, потому что:

12 столбцов * 90 пикселей = 1080 пикселей

11 желобов * 10px = 110px.

1180px + 110px = 1190px.