singularitygs - 仍然与嵌套网格混淆

Question

我终于找到了一些时间来测试 Singularity，我又回到了我之前遇到的一个问题，因为我找不到明显的解决方案。

我的问题是嵌套网格。
假设我有一个简单的 12 列网格

$grids: add-grid(12 at $break2);

我的布局使用了一个主要内容区域，该区域扩展到这 12 列中的 9 列:

@include breakpoint($break2) {
    @include grid-span(9, 3);
    border: 1px solid red;
}

在该内容区域内，我需要创建一个分为三列的部分，这意味着里面的每篇文章将跨越父容器的 3 列(即 9 列中的 9 列)。

我用下面的代码试过这个，但不能让它工作。

.highlights{
    overflow: hidden;
    border: 1px solid black;

    article{

        @include float-span(3);

        &:nth-child(3n){
            @include float-span(1, 'last');
        }
    }
}

我的目标是有一个简单的声明，在那里我可以为每篇文章都有一个通用的文章声明，就像我上面所做的那样，为每一行中的最后一篇文章传递一个规则。

也许我的困惑是因为我已经习惯了我正在使用的当前网格系统，你能帮忙解决这个问题吗？
嵌套网格以便它们可以与其父元素对齐的最佳和最实用的方法是什么？

Answer 1

因此，您遇到的问题是您尚未更改网格上下文，并且此时仍在使用全局 12 列网格上下文。您需要将网格上下文更改为 9，因为您现在位于 9 列网格内。以下应该可以解决您的问题:

.highlights{
  overflow: hidden;
  border: 1px solid black;

  article{
    @include layout(9) {
      @include float-span(3);

      &:nth-child(3n){
        @include float-span(1, 'last');
      }
    }
  }
}