2

我想创建一个 1200 像素的固定非灵活非常该死的静态网格。所以我发现，我需要 90 像素的列宽、12 列、10 像素的装订线和 1200 像素的最大宽度。

好吧..以下是我的设置，它给了我一个错误“无效的空操作：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,
  )
);

样式.scss>

    @import "grids";

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

    border: solid thin red;
    height:10px;

}
4

1 回答 1

2

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

在这种情况下：

gutters: 1/9,

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

根据文档，您可以通过放置列宽来以像素为单位指定装订线宽度。例如：

gutters: 10px/90px

虽然结果是完全一样的。如果您输入的值与您的列宽不匹配，您将不会得到您所说的像素宽度，而是适当的分数。

所以有：

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

会给你留下 20px 宽的排水沟。因为数学。:)

笔显示它在这里工作。

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

12 列 * 90 像素 = 1080 像素

11 个装订线 * 10 像素 = 110 像素。

1180 像素 + 110 像素 = 1190 像素。

于 2014-12-21T19:40:19.083 回答