苏西无法让它占据三列

Question

我有个问题。。我不能让我的元素占据三列，我已经将其设置为12列中的4列，应该等于3列。我已经能够用@include omega；关于最后一个孩子，但当我有3个以上的元素时，这并不是一个真正的解决方案。我知道这是因为它在第三个元素上添加了边距，但我该如何绕过它呢？这样它就删除了每三个元素上的空白？

Scss

$susy: (
columns                     : 12,
gutters                     : 1/2,
container                   : 90%,
box-sizing                  : border-box,
);
$small                          : 30em;
$medium                     : 47em;
$large                          : 75em;
// layout
.layout {
    @include container();
.cases {
background-color: green;
    .case {
        @include span(4);
        background-color: blue;
        }
    }
}

HTML

        <article class="case">
            <a href="case.php">
                <div class="case-item case-img" style="background-image: url(img/img-1.jpg)">
                    <div class="case-info">
                        <header><h3>Case#1</h3></header>
                    </div>
                </div>
            </a>
        </article>
        <article class="case">
            <a href="case.php">
                <div class="case-item case-img" style="background-image: url(img/img-1.jpg)">
                    <div class="case-info">
                        <header><h3>Case#1</h3></header>
                    </div>
                </div>
            </a>
        </article>
        <article class="case">
            <a href="case.php">
                <div class="case-item case-img" style="background-image: url(img/img-1.jpg)">
                    <div class="case-info">
                        <header><h3>Case#1</h3></header>
                    </div>
                </div>
            </a>
        </article>

Answer 1

1. 首先，您需要将Susy导入到您的sass文件中
2. 此外，你还需要去掉最后一个孩子的保证金

使用这个代码，它应该工作：

@import "susy";
$susy: (
columns                     : 12,
gutters                     : 1/2,
container                   : 90%,
);
// layout
.layout {
    @include container();
}
.case {
  background-color: blue;
  @include span(4);
    &:nth-child(3n) {
     @include last;
  }
}

Answer 2

您尝试过gallery() mixin吗（请参阅文档）？它是为了准确地处理这个用例而构建的。

.case {
  @include gallery(4);
}