欧米茄如果元素有不同的宽度？

Question

如果元素有，Susy 可以自动填充多列布局 不同的宽度？

我想要什么（见下面的代码）：

+---------+---------+---------+
| I       | want    | this    |
+---------+---------+---------+
| filled  | automatically!    |
+---------+-------------------+

我得到的（见下面的代码）：

+---------+---------+---------+
| I       | want    |         |
+---------+---------+---------+
| this    | filled  |         |
+---------+---------+---------+
| automatically!    |         |
+---------+---------+---------+

用途？ 对于响应式布局，应该可以切换到两个 小屏幕的列（媒体查询断点）：

+---------+---------+
| I       | want    |
+---------+---------+
| this    | filled  |
+---------+---------+
| automatically!    |
+-------------------+

这可以通过让所有元素向左浮动来实现。 但是，我想使用像 Susy 这样的东西来降低复杂性。

HTML：

<div id="container">
  <div class="one">I</div>
  <div class="one">want</div>
  <div class="one">this</div>
  <div class="one">filled</div>
  <div class="two">automatically</div>
</div>

SCSS，没有 Omega 并且不工作：

@import 'susy';

$total-columns: 3;
$column-width: 200px;
$gutter-width: 5px;
$grid-padding: 10px;

#container {
    @include container;
    @include susy-grid-background;

    &>div {
        height: 50px;
    }

    &>div.one {
        @include span-columns(1);
    }

    &>div.two {
        @include span-columns(2);
        background: yellow;
    }
}

Answer 1

Susy 有 at-breakpoint() mixin 用于在不同的媒体查询断点建立不同的列计数。但是不，你不能自动做到这一点。