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

仍然与嵌套网格混淆

1 个答案: