grid - susy grid - 无法占据三列

Question

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

文案

$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

您是否尝试过gallery()mixin（请参阅文档）？它旨在准确处理此用例。

.case {
  @include gallery(4);
}

Answer 2

1. 首先，您需要将 Susy 导入到您的 sass 文件中。
2. 此外，您还需要摆脱最后一个孩子的 margin-right 。

使用此代码，它应该可以工作：

@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;
  }
}