Css 带Susy断点和固定排水沟的Susy网格

我已经开始使用Susy，它的功能给我留下了深刻的印象。 目前，我正在创建一个web，其中有4个媒体查询：

$mobile: 767px;
$tablet: 768px;
$small: 960px;
$large: 1200px;

对于最后两个$small和$large，我希望在px和10px水槽中有两个固定宽度的列。 我不希望在%b中出现排水沟，因为我希望确保所有浏览器的结果都是相同的

所以对于固定柱，我使用susy断点

@include susy-breakpoint($small, 24 1/1.5 split) {
    .container {
        @include container($small);
    }
    .main{
        .navigationWrap{
            @include span(24);
        }
        .articleWrap {
            @include span(668px);
        }
        .advertisment {
            @include span(240px);
            .advBanner{
                float: right;
            }
        }
    }

} // END of 960px mq

@include  susy-breakpoint($large, 24 1/1.5 split) {

    .container {
        @include container($large);
    }

    .main{
        .navigationWrap{
            @include span(24);//span(4);
        }
        .articleWrap {
            @include span(900px);
        }
    }

} // END of 1200px mq

那么，我的主要问题是：什么样的方法和最佳实践可以使排水沟固定而不是（像1/1.5）对网格有更多的控制

由于没有人在安斯威尔，我想出了“我自己的办法”来安装固定的排水沟和立柱

设置如下：

$susy: (
  columns: 24,
  column-width: 40px,
  gutter-width: 10px,
  grid-padding: 10px,
  gutter-position: split,
  global-box-sizing: content-box,
  math: static
);

和主要SCS：

//from 960px to 1200
@include breakpoint($small) {
    .container {
        @include container($small);
    }
    .header{
        .header-logoWrap{
            @include span(242px);
        }
        .header-bannerWrap {
            @include span(678px);
            img {
                float: right;
            }
        }
    }
    .main{
        .navigationWrap{
            @include span(930px);
        }
        .articleWrap {
            @include span(670px);
        }
        .advertisment {
            @include span(250px);
            .advBanner{
                float: right;
            }
        }
    }

} // END 960px to 1200

// from 1200 final
@include breakpoint($large) {
    .container {
        @include container($large);
    }
    .header{
        .header-logoWrap{
            @include span(242px);
        }
        .header-bannerWrap {
            @include span(918px);
            img {
                float: right;
            }
        }
    }   
    .main{
        .navigationWrap{
            @include span(1170px);
        }
        .articleWrap {
            @include span(910px);
        }
        .advertisment {
            @include span(250px);
            .advBanner{
                float: right;
            }
        }
    }
} // END of 1200px mq

但主要问题仍然悬而未决： -固定网格和排水沟的最佳做法是什么

在我建议的代码中，我使用

跨度（px）

如何设置

$susy

以防我不使用带列的span，单位为%

栏目：24，

---

列宽：40px，

您的设置映射混合使用了susy1和susy2术语。这些设置中的大多数被Susy忽略。我想这就是你想要的：

$susy: (
  columns: 24,
  column-width: 40px,
  gutters: 10px/40px, 
  gutter-position: split,
  global-box-sizing: content-box,
  math: static
);

dratters

设置始终是相对的，但输出不会是相对的-因为您使用的是

static

math。流体栅格中也可以有静态排水沟，但这是另一个问题。没有所谓的

边沟宽度

或

网格填充”设置，因此这些设置已被删除。分割水槽将在网格上留下半个水槽填充（

5px

）。如果您希望在边缘处有一个完整的

10px`，可以执行以下操作：

.container {
  padding: 0 gutters();
}