css - Susy 网格 : how to nest an odd number of columns inside a grid

Question

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

我正在使用 Susy grid (Sass/Compass，Susy 版本一)。

我的桌面总列数 = 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);
}