Susy画廊与交替宽度元素

Question

我使用Susy网格。我需要制作一个具有交替宽度的块的画廊。它们是1/3 2/3和3/3宽的方块。一个页面上可以有很多这样的块，它们可以以随机的顺序排列。

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

下一段代码没有帮助…

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

，因为gallery mixin只适用于相同的元素。http://codepen.io/inliner/pen/YXWRRp

那么这真的可能吗?

我需要这样的东西- http://codepen.io/anon/pen/vOKQbx但是用正确的方法处理利润。

Answer 1

你可以用CSS做任何布局，你可以用Susy。在这种情况下，我不知道有什么好的CSS浮动解决方案可以让你随机排序、对齐边缘、沟槽和流体宽度。不过，您可以使用flexbox:

.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);
}

如果你需要使用浮点数，你会得到最接近的是inside或split沟槽:

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

但效果略有不同。内部的排水沟可以给你足够的空间，但元素之间的空间不行。分开的排水沟会给你空间，但在边缘也有一些空间。如果一切都是静态宽度，你可以做一些.gallery上的负边距来删除边缘沟槽。