在Susy画廊中，我需要跨越前两个画廊专栏的第一个元素

Question

已经有人问过{p> Another very similar question。

我设置了一个由六列元素组成的画廊。但是我希望第一个元素跨越画廊的前两列。

$deskcol : 12;

.colSixth {
  @include gallery(2 of $deskcol);
}

.colSixth.strap {
  ??
}

<div class="colSixth strap">
   content should span two Sixths
</div>
<article class="colSixth">
    content spans one sixth
</article>
<article class="colSixth">
    content spans one sixth
</article>
<article class="colSixth">
    content spans one sixth
</article>
<article class="colSixth">
    content spans one sixth
</article>

有没有办法将gallery函数偏移两个？我试过隔离它。我已经在.strap元素上添加了额外的填充，但它会将第一行库推出页面。甚至尝试了各种风格的&:first-child选择器。

Answer 1

您是否只希望第一项跨越两列？在这种情况下，您可能不想使用库函数（改为使用span）。

为简单起见，您可能还想将排水沟切换到内部。

以下是您可以做的事情：

.colSixth {
  @iinclude span(2 of 12 inside); 

  &:first-child {
    @include span(4 of 12 inside); 
  }
}

尝试一下，让我知道。

Answer 2

我从来没有用Susy画廊偏移规则来解决这个问题。相反，我使用<article>中的每对.colThird元素包装，并将两个.colSixth元素嵌套在其中。

.colThird {
   @include gallery(4 of $deskcol);
}

.colSixth {
   @include span(2 of 4);
   &:last-child {
    @include omega;
   }
}

<div class="colThird">
   <div class="colSixth strap">
      content should span two Sixths
   </div>
</div>

<div class="colThird">
   <article class="colSixth">
       content spans one sixth
   </article>
   <article class="colSixth">
       content spans one sixth
   </article>
</div>