html - formularios - Cómo hacer fila de 5 columnas en zurb 5 foundation

foundation grid

Question

Quiero tener una columna de 5 columnas en row y solo 1 columna para pantallas de dispositivos pequeños con menos de 480px de ancho.

Soy nuevo en zurb foundation y todavía estoy aprendiendo sobre esto.

ejemplo de violín 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>

¿Es mejor para este tipo de cosas con columnas o lista ul li

Answer 1

¿Me gusta esto? 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>

Answer 2

Puede probar una cuadrícula de bloques: foundation.zurb.com/docs/components/block_grid.html . Agregué esto a tu 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>

Answer 3

Si está utilizando la versión de sass, hay una variable llamada $ total-columns en _settings.scss . Esto se establece en 12 de forma predeterminada. Puede cambiar esto a 10 y luego usar html como:

<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>

Answer 4

Tal vez llegue un poco tarde a la fiesta, pero si está utilizando scss, puede lograrlo fácilmente.

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

Luego en tu 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>

En realidad puedes tener cualquier número de columna que necesites. Simplemente pase el argumento (12/[required number of column])

Answer 5

puede extender la idea que Gavin propuso para crear una mezcla completa que cree otra cuadrícula completa que pueda usar, dentro del sistema regular. solo haz algo como:

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

luego agregue la clase footer_grid a su fila, y podrá usar tanto una cuadrícula general de 12 (ya que es estándar) como una cuadrícula de 10 para casos especiales.

Answer 6

La cuadrícula de la base se basa en 12 "unidades" por fila . En su ejemplo, tiene 5 <div> con clases medium-3 y large-3 = 15 unidades por fila. Foundation logrará colocar los primeros 4 en (4 * 3 = 12 unidades), y luego el quinto será empujado a la línea de abajo.

Una idea para encajar en sus 5 elementos, es darle a todo un ancho medium-2 (10 unidades), y desplazar la fila en una unit a la izquierda (clase medium-offset-1 en el primer elemento ) y decirle a Foundation que el quinto el elemento es el último en su fila (con end clase en el último elemento ).

Por ejemplo:

<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/

El punto del medium-offset-1 es centrar el contenido (después de una moda): tiene 10 unidades para encajar en un posible 12. El desplazamiento en uno, y el uso del end lo dejarán con un espacio de 1 unidad en cada lado de Tu contenido. Sin embargo, si desea que se sitúe a la izquierda de su página, simplemente elimine la clase de medium-offset-1 del ejemplo anterior.

Nota: en realidad, solo necesita el medium-2 y el medium-offset-2 , ya que, de forma predeterminada, esto también se aplica a large cuadrículas large , a menos que las clases large-* o large-offset-* .