Foundation Grid - Dispositivos grandes

En el capítulo anterior presentamos el diseño de cuadrícula para dispositivos medianos y pequeños. En los dispositivos pequeños se usa una proporción de 25%/75% (.small-3 y .small-9), pero en los dispositivos medianos se usa una proporción de 50%/50% (.medium-6 y .medium-6):

<div class="small-3 medium-6 columns">....</div>
<div class="small-9 medium-6 columns">....</div>

En dispositivos grandes recomendamos una proporción de 33%/66%.

Consejo:El tamaño de pantalla para dispositivos grandes se define como mayor que 64.0625em.

En dispositivos grandes use.large-*la clase.

Ahora agregamos dos columnas en dispositivos grandes:

<div class="small-3 medium-6 large-4 columns">....</div>
<div class="small-9 medium-6 large-8 columns">....</div>

Análisis

• La proporción de las dos columnas en dispositivos pequeños es 25%/75% (.small-3y.small-9)
• La proporción de las dos columnas en dispositivos medianos es 50%/50% (.medium-6y.medium-6)
• La proporción de las dos columnas en dispositivos grandes es 33%/66% (.large-4y.large-8)

	Nota:¡Asegúrate de que los números sumen 12 columnas!

Usar solo en dispositivos grandes

En el siguiente ejemplo especificamos.large-6la clase (no .medium-* y.small-*. Esto indica que en dispositivos grandes la proporción es 50%/50%. Pero en dispositivos medianos o pequeños se apilarán horizontalmente (100% de ancho):