Question

我有一个24 Susy列网格。我试图做一些每个跨越6列的盒子（每行4个），但是我想在它们周围添加一些排水沟，使用更宽的24列宽的容器。不幸的是，无论我尝试什么，我都无法让它发挥作用。似乎柱子没有调整它们的宽度来容纳排水沟......我认为Susy应该这样做，不是吗？我对所有这些都不熟悉所以我已经阅读了很多文章和帖子，并且无法弄清楚这个答案，所以非常感谢您给予的任何帮助。

以下是代码：

.solutionThumbnails {
  @include span(24 no-gutters);
  @include container;
  @include clearfix; 
  li {
    @include span(6);
    @include gutters(8px after);
    background: #666;
    float: left;
    height: 240px;
    display: block;
    &:nth-child(4) {
      margin-right: 0px;
    }
  }
}

现在它看起来像是什么，忽略格式化，否则仍在编码:)（你会看到它击倒了第四个项目）： http://i.stack.imgur.com/5tmWp.jpg

Answer 1

由于Sass不了解DOM，因此Susy不知道您的span和gutter mixins正在应用于同一元素，或者以任何方式相关。 Susy会在掌握所有信息时处理数学。我想你想要something like this？

.solutionThumbnails {
  @include container(24);

  li {
    @include gallery(6 of 24 split);
    background: #666;
    height: 240px;
  }
}

我不知道你的设置，或者你需要的输出的许多细节，但这应该让你接近。您不需要在同一元素上设置span，container和clearfix - container mixin处理所有这些。同样，gallery会处理相同大小项目的一致布局所需的一切。

我的例子并没有让你得到8px排水沟。将静态（px）排水沟与流体（％）网格混合的唯一方法是将排水沟移动到元素内。通过根据需要更改排水沟比率，您可以使用流体值近似8px排水沟。默认比率为.25。

Susy的天沟宽度问题

1 个答案: