Решать, когда вам нужна новая сетка-х "строка" в фундаменте 6 XY сетки

Question

Я пытаюсь определить лучшие практики использования grid-x "строк" ​​в Foundation 6 XY grid.

В частности, есть ли хорошее эмпирическое правило, когда мне нужно создать новую "строку" 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.