Susy gallery with alternate width elements

Question

I'm using Susy grid. I need to make a gallery of blocks with alternate widths. They will be 1/3, 2/3 and 3/3 width blocks. There can be many of these blocks on a page and they can go in a random order. If a block doesn't fit on a single line it must jump to the next line.

<div class="gallery"
    <div class="item1of3">...</div>
    <div class="item1of3">...</div>
    <div class="item1of3">...</div>
    <div class="item2of3">...</div>
    <div class="item1of3">...</div>
    <div class="item3of3">...</div>
    <div class="item1of3">...</div>
    <div class="item2of3">...</div>
    <div class="item2of3">...</div>
</div>

The next code does not help...

.item1of3 {
    @include gallery(1 of 3);
}

.item2of3 {
    @include gallery(2 of 3);
}

.item3of3 {
    @include gallery(3 of 3);
}

because the gallery mixin works for identical elements only. http://codepen.io/inliner/pen/YXWRRp

So is it actually possible?

I need something like this - http://codepen.io/anon/pen/vOKQbx But with the right way to deal with margins. The blocks must be justified within container.

score 0 · Answer 1 · answered May 20 '15 at 16:42

Any layout you can do with CSS, you can do with Susy. In this case, though, I don't know of any good CSS float solution that gets you random ordering, justified edges, gutters between, and fluid widths. You can do it with flexbox, though:

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item1of3 {
  flex: 0 0 span(1 of 3);
}

.item2of3 {
  flex: 0 0 span(2 of 3);
}

.item3of3 {
  flex: 0 0 span(3 of 3);
}

If you need to use floats, the closest you'll get is with inside or split gutters:

.item1of3 {
    @include span(1 of 3);
}

.item2of3 {
    @include span(2 of 3);
}

.item3of3 {
    @include span(3 of 3);
}

But the effect is slightly different. Inside gutters will give you justification, but not space between elements. Split gutters will give you space between, but also some space at the edges. If everything is static-width, you might be able to do something with negative margins on .gallery to remove the edge gutters.

Susy gallery with alternate width elements

1 Answers1