Foundation Block Grid
El Block Grid se utiliza para dividir uniformemente el contenido de la página: por ejemplo, si se quieren mostrar cuatro imágenes en una fila, el ancho debe dividirse por igual en cualquier pantalla.
Se puede usar<ul>elemento con.small|medium|large-block-grid-numla clase para crear el Block Grid.numSe utiliza para especificar la cantidad de divisiones:
Ejemplo
<ul class="small-block-grid-3">
<li><img src="newyork.jpg" alt="New York"></li>
<li><img src="paris.jpg" alt="Paris"></li>
<li><img src="sanfran.jpg" alt="San Francisco"></li>
</ul>
<li><img src="newyork.jpg" alt="New York"></li>
<li><img src="paris.jpg" alt="Paris"></li>
<li><img src="sanfran.jpg" alt="San Francisco"></li>
</ul>
Pruébalo »
Otro ejemplo, usando párrafos:
Ejemplo
<ul class="small-block-grid-3">
<li><p>Just a Simple Example Text...</p></li>
<li><p>Just a Simple Example Text...</p></li>
<li><p>Just a Simple Example Text...</p></li>
</ul>
<li><p>Just a Simple Example Text...</p></li>
<li><p>Just a Simple Example Text...</p></li>
<li><p>Just a Simple Example Text...</p></li>
</ul>
Pruébalo »
Mostrar diferentes cantidades según el tamaño de la pantalla
Al agregar múltiples clases de block grid, se pueden configurar diferentes cantidades de bloques para diferentes tamaños de pantalla:
Ejemplo
<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
<li><img src="newyork.jpg" alt="New York"></li>
<li><img src="paris.jpg" alt="Paris"></li>
<li><img src="sanfran.jpg" alt="San Francisco"></li>
<li><img src="newyork.jpg" alt="New York"></li>
</ul>
<li><img src="newyork.jpg" alt="New York"></li>
<li><img src="paris.jpg" alt="Paris"></li>
<li><img src="sanfran.jpg" alt="San Francisco"></li>
<li><img src="newyork.jpg" alt="New York"></li>
</ul>
Pruébalo »