Question

我想创建一个固定的非灵活非常模糊的1200px静态网格。所以我想出来，我需要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＆GT;

    @import "grids";

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

    border: solid thin red;
    height:10px;

}

Answer 1

您需要按比例指定装订线。

在这种情况下：

gutters: 1/9,

最终结果（作为你的列90px）将是10px宽的排水沟。您可以通过将其表示为一个比例来指定装订线宽度（以像素为单位）。

根据文档，您可以 speficy装订线宽度（以像素为单位），也可以设置列宽。 E.g：

gutters: 10px/90px

虽然结果完全相同。如果你输入一个与你的列宽不匹配的值，你就不会得到你说的像素宽度，而是得到适当的分数。

所以：

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

将为您留下20px宽的排水沟。因为数学。：）

显示它工作的笔here。

最后，您的布局 1190px 宽，而不是1200px因为：

12列* 90px = 1080px

11个水槽* 10px = 110px。

1180px + 110px = 1190px。

在'px＆＃39;中不能使用排水沟。在数学中：静态模式

1 个答案: