Sistema de cuadrícula Foundation
El sistema de cuadrícula de Foundation tiene 12 columnas.
Si no necesitas 12 columnas, puedes combinar algunas columnas para crear columnas de mayor ancho.
El sistema de cuadrícula de Foundation es adaptable. Las columnas se ajustan automáticamente según el tamaño de la pantalla. En pantallas grandes, pueden ser tres columnas; en pantallas pequeñas, pueden ser tres columnas individuales en orden.
Columnas de la cuadrícula
El sistema de cuadrícula de Foundation tiene tres columnas:
.small(Móvil).medium(Tabletas).large(Dispositivos de computadora: portátiles, de escritorio)
Las clases anteriores se pueden combinar para crear diseños más flexibles.
Estructura básica de la cuadrícula
A continuación se muestra un ejemplo básico de la estructura de cuadrícula de Foundation:
Ejemplo
<div class="small|medium|large-num columns"></div>
</div>
<div class="row">
<div class="small|medium|large-num columns"></div>
<div class="small|medium|large-num columns"></div>
<div class="small|medium|large-num columns"></div>
</div>
<div class="row">
...
</div>
Primero, crea una fila (<div
class="row">). Este es un contenedor horizontal para columnas verticales. Luego agrega la cantidad de columnas especificada por lasmall-num, medium-numylarge-numclase. Nota: el número de columnas
numdebe sumar 12:
Ejemplo
<div class="small-12 columns">.small-12 yellow</div>
</div>
<div class="row">
<div class="small-8 columns">.small-8 beige</div>
<div class="small-4 columns">.small-4 gray</div>
</div>
<div class="row">
<div class="large-9 small-8 columns">.small-8 .large-9 pink</div>
<div class="large-3 small-4 columns">.small-4 .large-3 orange</div>
</div>
Pruébalo »
En el ejemplo, la clase <div> de la primera fila es.small-12, lo que crea 12 columnas (ancho del 100%).
La segunda fila crea dos columnas,.small-4con un ancho del 33.3%,.small-8y el ancho del 66.6%.
En la tercera fila, añadimos dos columnas adicionales (.large-3y.large-9). Esto significa que en tamaños de pantalla grandes, las columnas se convierten en 25% (.large-3) y 75% (.large-9) respectivamente. También especificamos la proporción de las columnas en pantallas pequeñas como 33% (.small-4) y 66% (.small-8). Esta forma de combinar es muy útil para la visualización en diferentes pantallas.
Opciones de la cuadrícula
La siguiente tabla resume las especificaciones del sistema de cuadrícula de Foundation en varios dispositivos:
| Dispositivos pequeños Phones (<40.0625em (640px)) |
Dispositivos medianos Tablets (>=40.0625em (640px)) |
Dispositivos grandes Laptops & Desktops (>=64.0625em (1025px)) |
|
|---|---|---|---|
| Comportamiento de la cuadrícula | Siempre es horizontal | Comienza colapsada; por encima del punto de ruptura es horizontal | Comienza colapsada; por encima del punto de ruptura es horizontal |
| Prefijo de clase | .small-* | .medium-* | .large-* |
| Número de clases | 12 | 12 | 12 |
| Se puede anidar | Yes | Yes | Yes |
| Desplazamientos | Yes | Yes | Yes |
| Orden de columnas | Yes | Yes | Yes |
Pantalla ancha
La cuadrícula máxima (.row) tiene un ancho de 62.5rem. En pantallas anchas, cuando el ancho es mayor a 62.5rem, las columnas no abarcan el ancho de la página, incluso si el ancho se establece al 100%. Pero puedes restablecer el max-width mediante CSS:
Si usas el max-width predeterminado, pero deseas que el color de fondo abarque todo el ancho de la página, puedes usar.rowenvolver todo el contenedor y especificar el color de fondo que necesites:
Ejemplo
<div class="row">
<div class="small-6 columns" style="background-color:yellow;">.small-6</div>
<div class="small-6 columns" style="background-color:pink;">.small-6</div>
</div>
</div>
Pruébalo »