如果元素具有不同的宽度, 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;
}
}