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

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

0 голосов
/ 26 мая 2018

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

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

1 Ответ

0 голосов
/ 13 марта 2019

Можно обернуть ячейки в контейнер .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.

...