Сетка фундамента Zurb - повторяющиеся колонны без ряда

Question

Это неправильно делать это так?

<div class="row">
  <div class="medium-6 columns">some content</div>
  <div class="medium-6 columns">some content</div>
  <div class="medium-6 columns">some content</div>
  <div class="medium-6 columns">some content</div>
  <div class="medium-6 columns">some content</div>
  <div class="medium-6 columns">some content</div>
</div>  

Вместо:

<div class="row">
  <div class="medium-6 columns">some content</div>
  <div class="medium-6 columns">some content</div>
</div>
<div class="row">
  <div class="medium-6 columns">some content</div>
  <div class="medium-6 columns">some content</div>
</div>
<div class="row">
  <div class="medium-6 columns">some content</div>
  <div class="medium-6 columns">some content</div>
</div>   

Из того, что я вижу, результат тот же, но с меньшим divs.

Answer 1

<div class="row">
  <div class="small-12 medium-4 columns">some content</div>
  <div class="small-12 medium-4 columns">some content</div>
  <div class="small-12 medium-4 columns">some content</div>
</div>

Несколько вещей, которые делает эта структура:

1. округление по ширине - браузер отображает ширину% по-разному.. поэтому большинство фреймворков имеют float :opposite Направление собственности наcolumn:last-child в строке, чтобы последние столбцы во всех строках были выровнены по линии.
2. Строка используется для очистки поплавков в макете. Пример: Ссылка

в ссылке выше Выравнивание испорчено из-за неодинаковой высоты в столбцах.

<div class="row">
  <div class="medium-6 columns">some content</div>
  <div class="medium-6 columns">some content</div>
  <div class="medium-6 columns">some content</div>
  <div class="medium-6 columns">some content</div>
  <div class="medium-6 columns">some content</div>
  <div class="medium-6 columns">some content</div>
</div>

Нет ничего плохого в использовании этой структуры.

Существуют макеты, в которых вы не можете использовать новую строку для каждых 12 столбцов, как указано в другом ответе.

Если вы столкнетесь с проблемами выравнивания, как в вопросе, который я разместил выше (это будет единственным основным различием между обеими структурами). Есть пользовательские классы, чтобы очистить их.

Answer 2

Оба способа верны. Добавление.row полезно, потому что оно сохраняет порядок и очищает предыдущие значения. Возьмите этот пример на небольшой точке останова, где он переключает деления на 50% (при условии сетки из 12 столбцов):

<div class="row">
  <div class="small-6 medium-4 columns">some content</div>
  <div class="small-6 medium-4 columns">some content</div>
  <div class="small-6 medium-4 columns">some content</div>
</div>
<div class="row">
  <div class="small-6 medium-4 columns">some content</div>
  <div class="small-6 medium-4 columns">some content</div>
  <div class="small-6 medium-4 columns">some content</div>
</div>

В приведенном выше примере, когда он сталкивается с малым, сетка будет 2, 1, 2 и 1. Теперь сделайте это с одной строкой:

<div class="row">
  <div class="small-6 medium-4 columns">some content</div>
  <div class="small-6 medium-4 columns">some content</div>
  <div class="small-6 medium-4 columns">some content</div>
  <div class="small-6 medium-4 columns">some content</div>
  <div class="small-6 medium-4 columns">some content</div>
  <div class="small-6 medium-4 columns">some content</div>
</div>

Теперь этот пример будет разбит на 2, 2 и 2. Если у вас возникают плавающие проблемы со вторым примером, Equalizer Foundation - отличный способ исправить эти проблемы.