Question

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

Three columns with third empty Two columns with second empty

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

@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列网格从来没有任何理由。在那个宽度你根本不需要任何网格，你不需要Susy的帮助来实现它。我总是会用你需要的最小的多列网格设置Susy。由于容器在第一个断点之下是流体，因此对于单列版本，它将缩小。
无需使用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)

干杯！

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

1 个答案: