0

我创建了一个非常简单的网格，最多包含三列，但是除了单列之外，我永远无法填充最后一列。

三列第三空 两列，第二个为空

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

@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>

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

4

1 回答 1

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)

干杯!

于 2013-07-19T21:40:29.360 回答