决定何时需要在Foundation 6 XY网格中使用新的grid-x“row”

Question

我正在尝试确定在Foundation 6 XY网格中使用grid-x“rows”的最佳实践。

具体来说，当我应该创建一个新的grid-x“row”而不是将多个单个元素单元格放在一个grid-x“row”中时，是否有一个很好的经验法则（我继续使用引号，因为它们在技术上不是行在XY网格中）。

当我需要在同一行中对齐多个“列”单元格时（例如，如果我想并排两个“列”），这似乎是直截了当的，但是当我基本上堆叠单个元素“行”时（如何）例如，一个h1，一个段落，另一个段落等）？我应该将这些元素放在单个grid-x元素中的单个单元格中......

<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框架提供的一致容器边距和填充。