Question

假设我有一个带有容器div的网格，例如：

<div class="a">
    <div class="a1"></div>
    <div class="a2"></div>
    <div class="a3"></div>
    <div class="a4"></div>
</div>

以及以下sass：

@import "susy";

$susy: (
    columns: 12,
    gutters: 1/4,
);

.a{
    background-color: blue;
    height: span(12);
    @include span(6);
}

是否有可能使a的内部成为自己的2x2网格？我想在a1的每个角落放置a2，a3，a4和a，如下所示：

.a1, .a2, .a3, .a4{
    height: span(1);
}
.a1, .a3{
    @include span(1);
}
.a2, .a4{
    @include span(last 1);
}
.a1{
    background-color: green;
}
.a2{
    background-color: orange;
}
.a3{
    background-color: red;
}
.a4{
    background-color: pink;
}

我希望左上角有a1，然后通过a2，a3和a4顺时针方向。

Answer 1

是的，a目前跨越主网格上的6列，因此最简单的可能是让所有a1 - a4元素跨越3 of 6：

.a1, .a2, .a3, .a4 {
    @include span(3 of 6);
}
.a2, .a4{
    @include last;
}

但是你也可以声明你想要的任意语境：

.a1, .a2, .a3, .a4 {
    @include span(1 of 2);
}
.a2, .a4{
    @include last;
}

我们无法保证与您的全球网格对齐，但我不知道您是否想要这样。您还可以查看with-layout wrapper，如果您想要更大的代码块的新默认网格。

使用susy将自定义网格放在div中

1 个答案: