在 Susy 画廊中，我需要将第一个元素跨越前两个画廊列

Question

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

我从来没有真正用各种 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>

Answer 2

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

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

您可以改为执行以下操作：

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

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

试试看，然后告诉我。

在 Susy 画廊中，我需要将第一个元素跨越前两个画廊列

In a Susy gallery I need to span the first element across the first two gallery columns

sass

susy