具有交替宽度元素的 Susy 画廊答案

【问题标题】：Susy gallery with alternate width elements具有交替宽度元素的 Susy 画廊
【发布时间】：2015-05-19 12:16:12
【问题描述】：

我正在使用 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);
}

因为画廊 mixin 仅适用于相同的元素。 http://codepen.io/inliner/pen/YXWRRp

那么真的有可能吗？

我需要这样的东西 - http://codepen.io/anon/pen/vOKQbx 但是用正确的方法来处理利润。块必须在容器内对齐。

【问题讨论】：

标签： css sass susy

【解决方案1】：

任何你可以用 CSS 做的布局，你都可以用 Susy 做。不过，在这种情况下，我不知道有什么好的 CSS 浮动解决方案可以让您随机排序、对齐的边缘、中间的排水沟和流动的宽度。不过你可以do it with 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 gutters：

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

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

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

但效果略有不同。内部排水沟会给你理由，但不是元素之间的空间。拆分排水沟将为您提供空间，但也为边缘提供一些空间。如果一切都是静态宽度，您也许可以在.gallery 上使用负边距来消除边缘排水沟。

【讨论】：