仍然对嵌套网格感到困惑

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');
      }
    }
  }
}