html - 在 Foundation 6 XY 网格中决定何时需要新的 grid-x "row"

Question

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

具体来说，对于何时应该创建新的 grid-x“行”与将多个单个元素单元格放在单个 grid-x“行”中，是否有一个好的经验法则(我一直使用引号，因为它们技术上不是 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 中是很好的，例如，当您使用集中式半 Angular 单元格并且不希望它们跳入同一行时:

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