Susy grid：如何在网格内嵌套奇数列

Question

只是想知道解决这个问题的最佳方法是什么......

我使用的是Susy grid（Sass/Compass，Susy 版本一）。

我的桌面总列数 = 12。但是在 12 个中，我想将其分成 5 个等宽的列。

有没有一种使用 Susy 网格的简单方法来做到这一点？我不知道如何将奇数列嵌套到偶数列中。

Answer 1

你可以就你的上下文对 Susy 撒谎，它会将空间划分为许多列，正如你所说的可用 - span-columns(1, 5) 会将空间划分为 5 个单位。唯一的问题是，在 12 列网格和 5 列网格中，您的装订线的大小会有所不同，因为它们是相对于列的大小计算的。

在同一个容器中获取不同网格并在网格之间保持相等的间距的最简单方法是将间距移动到内部。 Susy 1 没有自动化的选项，但 Susy 2 有。你会想要inside-static 选项。

在 Susy 1 中，您必须将装订线设置为 0（使用您使用的任何单位），确保您使用的是border-box box-sizing，然后手动添加装订线。

@mixin static-gutters($width) {
  padding-left: $width/2;
  padding-right: $width/2;
}

.item {
  @include span-columns(1, 5);
  @include static-gutters(1em);
}