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

Question

我是后端开发人员，也是基金会以及CSS的新成员。如果设计人员在设计时没有考虑网格结构，我就会发现很少有前端开发人员在将设计转换为CSS时经常遇到困难。这通常发生是因为12个网格（默认）列结构不提供根据需要准确放置元素的灵活性。

因为基金会提供给我们使用自定义网格计数，使用它是明智的吗？大部分网格结构使用12个网格列，因为12是很好的数字。如果我们使用具有相同排水沟的60格网格柱结构，那么我们将如何使用12格网格（例如，排水沟为20px）呢？我相信它应该给我们更多的灵活性来放置元素。

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

有些人可能会说，如果我们在60格的列结构中使用20像素的格线，那么列之间的间距将占用网页的大部分空间。但是，不，在我们使用实际的列之前，排水沟是虚构的。所以这里只用3个水槽的空间，剩下的就是3：3：4的柱子。

这正是我对网格结构的理解。有更多知识的人可以让我知道，如果我所假设的事实际上有意义或者有其他一些我缺少的观点，并且如果我使用60格结构可能会困扰我？

Answer 1

伟大的问题。

我绝对没有专家，但我已经使用了基金会相当多。我假设你在使用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) { } 

最后，如果你不希望使用任何特殊的东西，你可以在你列使用百分比，并省略标准large-＃列类。所以，你的自定义SCSS会是这个样子：http://foundation.zurb.com/sites/docs/grid.html#columns

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

不知道这是否回答你所有的问题，但听起来像有尽可能最佳实践只是一些困惑？你可以让你的网格尽可能大，但你必须保持它的任何方式。