Question

我试图确定使用grid-x＆＃34;行的最佳做法＆＃34;在Foundation 6 XY网格中。

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

当我需要对齐多个＆＃34;列时，它似乎很简单。同一行中的单元格（例如，如果我想要两个＆＃34;列和＃34;并排），但是当我基本上堆叠单个元素＆＃34;行＆＃34; （例如，一个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中。 / p>

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

决定何时需要新的grid-x＆＃34; row＆＃34;在Foundation 6 XY网格中

1 个答案: