Susy grid:如何在网格中嵌入奇数列

时间:2014-02-19 18:18:20

标签: css sass susy-compass compass-sass

12 column grid with 5 columns instead

只是想知道最好的方法是什么......

我正在使用Susy grid(Sass / Compass,Susy第一版)。

我的桌面总列数= 12.但是在十二个内部,我想把它分成5个相等宽度的列。

使用Susy网格有一种简单的方法吗?我不知道如何将奇数列嵌入偶数列中。

1 个答案:

答案 0 :(得分:3)

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

在同一个容器中获取不同网格并在网格上保持相同的水槽的最简单方法是将排水沟移到里面。 Susy 1没有选择自动化,但Susy 2确实如此。您需要inside-static选项。

在Susy 1中,您必须将排水沟设置为0(使用您使用的任何单位),确保使用边框盒大小,然后手动添加排水沟。 / p>

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

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