Как сделать 5 столбцов в базе zurb 5

Я хочу иметь 5 столбцов в row и только 1 столбец для экранов небольших устройств с шириной менее 480 пикселей.

Я новичок в создании zurb и все еще об этом узнал.

скрипку пример http://jsfiddle.net/V7TuY/1/

<div class="row">
    <div class="small-6 medium-3 large-3 columns">
        <img src="http://placehold.it/480x600&text=[img 1]" />
        <p></p>
    </div>
    <div class="small-6 medium-3 large-3 columns">
        <img src="http://placehold.it/480x600&text=[img 2]" />
        <p></p>
    </div>
    <div class="small-6 medium-3 large-3 columns">
        <img src="http://placehold.it/480x600&text=[img 3]" />
        <p></p>
    </div>
    <div class="small-6 medium-3 large-3 columns">
        <img src="http://placehold.it/480x600&text=[img 4]" />
        <p></p>
    </div>
    <div class="small-6 medium-3 large-3 columns">
        <img src="http://placehold.it/480x600&text=[img 5]" />
        <p></p>
    </div>

Лучше ли это делать со столбцами или списком ul li

ОТВЕТЫ

Ответ 1

Основа сетки основана на 12 "единиц" за строку. В вашем примере у вас есть 5 <div> с классами medium-3 и large-3= 15 единиц на строку. Фонду удастся установить первые 4 в (4 * 3 = 12 единиц), а затем пятый будет перенесен на линию ниже.

Одна идея, чтобы поместиться в ваших 5 предметах, состоит в том, чтобы дать все ширину medium-2 (10 единиц) и смещать строку на один unit слева (класс medium-offset-1 в первом элементе) и сообщите Foundation, что пятый элемент является последним в вашей строке (с классом end на последнем элементе).

Например:

<div class="row">

  <div class="small-12 medium-2 medium-offset-1 columns">   
    <img src="http://placehold.it/480x600&text=[img 1]"/>
  </div>
  <div class="small-12 medium-2 columns">   
    <img src="http://placehold.it/480x600&text=[img 1]"/>
  </div>
  <div class="small-12 medium-2 columns">   
    <img src="http://placehold.it/480x600&text=[img 1]"/>
  </div>
  <div class="small-12 medium-2 columns">   
    <img src="http://placehold.it/480x600&text=[img 1]"/>
  </div>
  <div class="small-12 medium-2 columns end">   
    <img src="http://placehold.it/480x600&text=[img 1]"/>
  </div>

</div>

http://jsfiddle.net/V7TuY/4/

Точка medium-offset-1 состоит в том, чтобы центрировать содержимое (после мода): у вас есть 10 единиц, чтобы вписаться в возможное 12. Смещение на единицу, а с помощью end оставит вас с 1 единицей пробела на каждой стороне вашего контента. Однако, если вы хотите, чтобы он сидел слева от вашей страницы, просто удалите класс medium-offset-1 из приведенного выше примера.

Примечание. Здесь вам понадобятся только medium-2 и medium-offset-2, так как по умолчанию это относится и к сеткам large, если они не переопределены классами large-* или large-offset-*.

Ответ 2

Может быть, я немного опаздываю на вечеринку, но если вы используете scss, вы можете легко достичь этого.

.col5-unit{
  @include grid-column(2.4); // (12/5 = 2.4)
}

Затем в вашем html

<div class="row">
  <div class="col5-unit"> Column 1 </div>
  <div class="col5-unit"> Column 2 </div>
  <div class="col5-unit"> Column 3 </div>
  <div class="col5-unit"> Column 4 </div>
  <div class="col5-unit"> Column 5 </div>
</div>

На самом деле у вас может быть любое количество столбцов, которое вам нужно. Просто передайте аргумент (12/[required number of column])

Ответ 3

Как это? http://jsfiddle.net/PZuLm/

<div class="row">   
        <div class="small-12 medium-2 medium-offset-1  columns">   
          <img src="http://placehold.it/480x600&text=[img 1]"/>
        </div>     
        <div class="small-12 medium-2 columns">
           <img src="http://placehold.it/480x600&text=[img 2]"/>         
        </div>
        <div class="small-12 medium-2 columns">  
           <img src="http://placehold.it/480x600&text=[img 3]"/>    
        </div>
        <div class="small-12 medium-2 columns">    
           <img src="http://placehold.it/480x600&text=[img 4]"/>
        </div>
        <div class="small-12 medium-2 medium-pull-1 columns">    
           <img src="http://placehold.it/480x600&text=[img 5]"/> 
        </div>   
</div>

Ответ 4

Если вы используете версию sass, есть переменная с именем $total-columns в _settings.scss. По умолчанию установлено значение 12. Вы можете изменить это на 10, а затем использовать html, например:

<div class="row">

  <div class="small-10 medium-2 large-2 columns">   
    <img src="http://placehold.it/480x600&text=[img 1]"/>
  </div>
  <div class="small-10 medium-2 large-2 columns">   
    <img src="http://placehold.it/480x600&text=[img 1]"/>
  </div>
  <div class="small-10 medium-2 large-2 columns">   
    <img src="http://placehold.it/480x600&text=[img 1]"/>
  </div>
  <div class="small-10 medium-2 large-2 columns">   
    <img src="http://placehold.it/480x600&text=[img 1]"/>
  </div>
  <div class="small-10 medium-2 large-2 columns">   
    <img src="http://placehold.it/480x600&text=[img 1]"/>
  </div>

</div>

Ответ 5

вы можете расширить идею, предложенную Gavin, чтобы создать полный mixin, который создает еще одну целую сетку, которую вы можете использовать в обычной системе. просто сделайте что-нибудь вроде:

.alternative_grid {
  $total-columns:10;
  @include grid-row();
  @include grid-html-classes($size:large);
  $total-columns:10;
}

затем добавьте класс footer_grid к своей строке, и вы сможете использовать как 12 сетчатый общий (с его стандартным), так и 10 сетку для особых случаев.

Ответ 6

Вы можете попробовать сетку блока: http://foundation.zurb.com/docs/components/block_grid.html. Я добавил это в свой JSFiddle:

<ul class="small-block-grid-1 medium-block-grid-5 large-block-grid-5">
<li><!-- Your content goes here -->1</li>
<li><!-- Your content goes here -->2</li>
<li><!-- Your content goes here -->2</li> 
<li><!-- Your content goes here -->4</li>
<li><!-- Your content goes here -->5</li> 
</ul>