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

【问题标题】：In a Susy gallery I need to span the first element across the first two gallery columns在 Susy 画廊中，我需要将第一个元素跨越前两个画廊列
【发布时间】：2015-03-17 20:21:48
【问题描述】：

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 选择器。

【问题讨论】：

标签： sass susy

【解决方案1】：

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

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

你可以这样做：

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

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

试试看，然后告诉我。

【讨论】：

感谢您的建议，下次我会记住的。但我最初的直觉是我更喜欢使用画廊功能，因为它有助于在不同的断点创建不同的列布局。
@Seb 使用 span 将帮助您在不同断点处创建不同的列布局（在此代码中）。你只需要改变宽度和上下文。
相比之下，你的需要更多的代码才能在不同的断点处产生相同的效果。试一试。

【解决方案2】：

我从来没有真正用 Susy 画廊偏移规则解决过这个问题。相反，我将每对 <article>elements 包装在 .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>

【讨论】：