Susy grid最后一列永远不会被填充

Question

我已经创建了一个非常简单的网格，最多可包含三列，但除了单列之外，我永远无法获得任何东西来填充最后一列。

​

​

在这里，您可以看到两列和三列布局，每个布局都有一个空列。

@import susy

+border-box-sizing

$total-columns  : 1
$column-width   : 20em
$gutter-width   : 1em
$grid-padding   : $gutter-width
$base-font-size : 20px
#grid
    +container(1, 2, 3)

.project
    +span-columns(1,1)
    @for $break from 2 through 3
        +at-breakpoint($break)
            +span-columns(1,$break)

就像我说的，网格非常简单。我觉得我可能对它的工作原理有一个根本的误解，但我已经阅读了文档和这里的许多其他Susy问题，但都无济于事。

我的HTML输出是由CMS (Koken)生成的，但这里是网格本身的标记。

<section id="portfolio">
    <div id="grid">
        <koken:load source="albums" filter:category="portfolio" limit="12">
            <koken:loop>
                <div class="project">
                    <koken:link>
                        <koken:img size="3:2" lazy="true" fade="200" />
                    </koken:link>
                    <h2>
                        <koken:link>
                            {{ album.title }}
                        </koken:link>
                    </h2>
                    <p>{{ album.description }}</p>
                </div>
            </koken:loop>
        </koken:load>
    </div>
</section>

谁能告诉我如何让我的元素利用我的网格的最后一列？

Answer 1

您需要从最后一列的任何元素中删除间距(右边距)。您可以通过几种方式完成此操作，具体取决于您需要的内容：

.this-element {
  @include span-columns(1 omega);
}

或

.this-element {
  @include omega;
}

或者，在您的情况下更有可能是：

.these-elements {
  @include span-columns(1);
  @include nth-omega(#{$break}n);
}

但即使是这样，在像你这样的循环中也会变得复杂。所以我推荐：

.these-elements {
  @include isolate-grid(1);
}

隔离网格将在循环中工作得很好，并将有助于修复沿途的任何子像素舍入误差。

关于您的代码的其他一些注释：

1. 当你不是在谈论根上下文时，你只需要传递上下文参数。在您的示例中，这意味着您根本不需要传递上下文。你可以这样做，如果你觉得它更容易阅读，但它是不需要的。
2. 没有任何理由使用1列网格。在这种宽度下，您不需要任何网格，也不需要Susy的帮助来实现它。我总是用你需要的最小的多列网格来设置Susy。由于容器在第一个断点以下是流动的，因此它将缩小到单列版本。
3. 不需要使用Susy进行全宽跨度。默认情况下，块元素跨越整个宽度。

最后，我推荐这样的东西：

$total-columns: 2

#grid
  +container(2, 3)

.project
  // nothing here: block elements are full-width by default
  @for $break from 2 through 3
    +at-breakpoint($break)
      +isolate-grid(1)

干杯!