0

我正在尝试确定在 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 有什么好的经验法则呢？

4

1 回答 1

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

于 2019-03-13T13:23:52.657 回答