CODEWITHSUNDEEP
sasssusy
Seb
Seb

Reputation: 733

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

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.

Upvotes: 0

Views: 225

Answers (2)

Zell Liew
Zell Liew

Reputation: 162

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.

Upvotes: 2

Seb
Seb

Reputation: 733

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>

Upvotes: -1

Related Questions