确定何时需要在基础 6 XY 网格中创建新的网格 x "row"

Question

我正在努力确定在Foundation 6 XY网格中使用grid-x"rows"的最佳实践。

具体来说，当我应该创建一个新的grid-x"行"与将多个单元素单元格放在一个grid-x的"行"中时，有没有一个好的经验法则(我一直使用引号，因为从技术上讲，它们不是XY网格中的行)。

当我需要将同一行中的多个"列"单元格对齐时(例如，如果我想并排排列两列)，这似乎是直截了当的，但当我基本上堆叠单个元素的"行"(例如，h1、一段、另一段等)时呢？我应该把这些元素放在单独的格里吗。。。

<div class="grid-x">
<div class="cell">
<h1>Text</h1>
</div>
</div>
<div class="grid-x">
<div class="cell">
<p>Text</p>
</div>
</div>
<div class="grid-x">
<div class="cell">
<p>Text</p>
</div>
</div>

或者我应该把它们放在一个牢房里。。。

<div class="grid-x">
<div class="cell">
<h1>Text</h1>
<p>Text</p>
<p>Text</p>
</div>
</div>

这只是一个武断(有些荒谬)的例子，但当应该使用新的grid-x时，什么是好的经验法则？

Answer 1

当您需要分离单元格时，可以将单元格包装在.grid-x容器中，而不是.row中，例如，当您使用集中的半角单元格并且不希望它们跳到同一行时：

<div class="grid-container">
<div class="grid-x grid-padding-x grid-padding-y centralise">
<div class="cell small-12 medium-8 large-6">
.. centralised content ...
</div>
</div>
<div class="grid-x grid-padding-x grid-padding-y centralise">
<div class="cell small-12 medium-8 large-6">
.. centralised content ...
</div>
</div>
<div class="grid-x grid-padding-x grid-padding-y">
<div class="cell small-12 medium-8 large-6">
.. not centralised content .. (will be placed on the left half of the row on large display)
</div>
<div class="cell small-12 medium-8 large-6">
.. not centralised content .. (will be placed on the right half of the row on large display)
</div>
</div>
</div>
<style>
grid-x.centralise {
justify-content: center;
}
</style> 

如果您不需要将内容划分为响应网格部分，那么您可以使用单个单元格来保持Zurb Foundation框架提供的容器边距和填充的一致性。