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

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的每个 Angular 落类似于以下内容:

.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 ，如果您想要一个新的默认网格用于更大的代码块。