基金会：是否建议使用自定义网格计数？

Question

我是一名后端开发人员，并且是 Foundation 和 CSS 的新手。如果设计师在设计时没有考虑网格结构，我见过很少有前端开发人员通常在将设计转换为 CSS 时遇到困难。这通常是因为 12 格（默认）列结构无法灵活地按照需要放置元素。

既然 Foundation 提供我们使用自定义网格数，那么使用它是否明智？大多数网格结构使用 12 个网格列，因为 12 是一个很好的数字。如果我们使用 60 格列结构和 12 格相同的装订线（比如装订线是 20px）怎么办？我相信它应该给我们更多的灵活性来放置元素。

让我解释一下。假设我的网页需要一个三列结构，比例为 3:3:4，我不想留下任何偏移量。我不确定我们如何使用 12 个网格列来实现这一点，除了可能需要手动定位元素。但是在 60 格的列中，我们可以很容易地通过使用 large-18、large-18、large-24 来实现这一点，并根据需要使用 gutter，比如 20px。

有人可能会说，如果我们在 60 格的列结构中使用 20px 的间距，那么列之间的间距会占用网页的大部分空间。但是不，在我们使用实际的列之前，排水沟是虚构的。所以这里将只使用 3 个装订线的空间，其余的将是比例为 3:3:4 的列。

这正是我对网格结构的理解。有更多知识的人可以告诉我，如果我的假设实际上是有道理的，或者如果我使用 60 网格结构，是否还有其他一些我遗漏的点可能会困扰我？

Answer 1

好问题。

我绝对不是专家，但我已经使用过相当多的 Foundation。我假设您使用的是 Foundation 6。有几种方法可以完成这些任务，我已经在项目中成功使用了这两种方法。

第一种方法是更改​​默认网格以适应尽可能多的列，只要您愿意维护即可。就个人而言，我用过的最多的是 24 列布局。它足够灵活，可以适应大多数布局。在您的 _settings.scss 中更改它：

$grid-column-count: 24;

如果这通常对您来说不够灵活，您可以使用常规网格，也可以制作自定义网格并使用类调用它。这样，您就可以将常规的 12/24 列网格用于大多数页面，但您可以在特殊情况下调用自定义网格。 http://foundation.zurb.com/sites/docs/grid.html#grid-row

@include grid-row($columns, $behavior, $width, $cf, $gutter) { }

最后，如果您不想使用任何特殊的东西，您可以在列中使用百分比并省略标准的大# 列类。所以你自定义的 scss 看起来像这样：http://foundation.zurb.com/sites/docs/grid.html#columns

.special-column{
  @include grid-column(30%);
}
.slightly-larger-column{
  @include grid-column(40%);
}

不确定这是否能回答您的所有问题，但听起来好像在最佳做法方面存在一些混淆？你可以让你的网格尽可能大，但无论哪种方式你都必须维护它。