无法让 Susy 网格正常工作

Question

我要疯了！不知道我做错了什么，它只是行不通.. 这是我的代码：

@import "susy";

$susy: (
  flow: rtl,
  columns: 24,
  gutters: .25,
);


.wrapper{
    @include container(70em);
}

header{
    background-color:red;
    height:200px;
}

nav{
    @include span(24);
    ul{
        li{
            background-color:orange;
            @include span(3);
        }
    }
}

.block{
    @include span(12 of 24);
    background-color:blue;
}

.ad{
    @include span(12 of 24);
    height:300px;
    background-color:green;
}

据我所知这是计算错误，这是某种错误吗？这是它目前为我呈现的图片。

为什么会这样？（我试过使用 css 重置，但没有修复）

Answer 1

flow: rtl

这就是您的代码正确对齐的原因。

为什么需要@include span(24);导航？替换此包含。

其他一切正常。

而 "properly" 在你的问题中它是怎么回事？

Answer 2

如果您能指出您希望实现的目标，那么帮助会容易得多。但我猜问题只是每行的最后一个元素掉到下一行。这是因为（与许多网格系统一样）默认设置使用边距作为装订线，您需要移除最后的装订线以使所有内容正确适合。您可以使用 last 关键字来做到这一点。

.ad{
    @include span(last 12);
}

对于您的导航，由于您有许多大小相同的兄弟姐妹，您可能想使用 gallery mixin 作为快捷方式来为您处理：

li{
    @include gallery(3);
}

另一个解决方案是使用 split 或 inside 排水沟，不需要任何移除：

$susy: (
  flow: rtl,
  columns: 24,
  gutters: .25,
  gutter-position: split,
);

无法让 Susy 网格正常工作

Cannot get Susy grid to work properly

css

sass

susy-sass

susy