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

Question

Another very similar question has already been asked.

I've set a gallery composed of elements in six columns. However I want the first element to span the first two columns of the gallery.

Screen shot of my current, wrong, layout

$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>

Is there a way to offset the gallery function by two? I've tried isolating it. And I've added extra padding on the .strap element, but it pushes the first row of gallery out and off the page. And even tried &:first-child selectors in various flavours.

score 2 · Answer 1 · answered May 19 '15 at 00:52

2

Do you only want the first item to span two columns? In that case, you might not want to use the gallery function (use span instead).

To make things simple, you might also want to switch gutters to inside.

Here's what you can do instead:

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

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

Try it out and let me know.

answered May 19 '15 at 00:52

Zell Liew

162
9

thanks for the suggestion I'll bear it in mind for the next time. But my initial gut feeling is that I'd prefer to use the gallery function because it would facilitate creating different column layouts at different breakpoints. – Seb May 19 '15 at 06:42
@Seb using span would help you even more with creating different column layouts at different breakpoints (in this code). You just have to change the width and context. – Zell Liew May 20 '15 at 07:01
In contrast, your's will take more code to produce the same effect at different breakpoints. Give it a try. – Zell Liew May 20 '15 at 07:01

score -1 · Accepted Answer · answered Mar 22 '15 at 17:43

I never really solved this with a Susy gallery offset rule of sorts. Instead I resorted to wrapping each pair of <article>elements in a .colThird and nesting the two .colSixth elements inside them.

.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>

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

2 Answers2