Ejemplos de cuadrícula de Foundation

A continuación hemos recopilado algunos ejemplos comunes de cuadrículas.

Tres columnas iguales

Este ejemplo demuestra cómo crear tres columnas iguales (33.3%/33.3%/33.3%), que muestran tres columnas en dispositivos medianos y grandes, y se apilan automáticamente en dispositivos pequeños:

Tres columnas desiguales

Este ejemplo demuestra cómo crear tres columnas desiguales (25%/50%/25%), que muestran tres columnas en dispositivos medianos y grandes, y se apilan automáticamente en dispositivos pequeños:

Dos columnas iguales

Este ejemplo demuestra cómo crear dos columnas iguales (50%/50%). La proporción de las columnas siempre es 50%/50% en dispositivos pequeños, medianos y grandes:

Dos columnas desiguales

Este ejemplo demuestra cómo crear dos columnas desiguales (33.3%/66.6%). La proporción de las columnas siempre es 33.3%/66.6% en dispositivos pequeños, medianos y grandes:

Modificar el orden de las columnas

Mediante el uso de.small|medium|large-push-*y.small|medium|large-pull-*clase para modificar el orden de las columnas:

Columnas anidadas

Puedes usar cuadrículas anidadas (insertar columnas dentro de columnas):

Mixto: móviles, dispositivos de escritorio

El sistema de cuadrícula de Foundation tiene tres columnas:.small-*(móviles),.medium-*(tabletas) y.large-*(dispositivos de escritorio). Estas clases se pueden combinar dinámicamente para hacer el diseño más flexible:

Consejo:Cada clase se amplía. Si deseas que la anchura en dispositivos de pantalla pequeña y grande sea la misma, puedes especificar la clase.small-*。

Mixto: móviles, tabletas y dispositivos de escritorio

Columnas centradas

Las columnas se pueden centrar usando la.small-centeredclase. Los dispositivos medianos y grandes pueden heredar el centrado de los dispositivos pequeños, pero debes establecer la clase de centrado en los dispositivos grandes..large-centered 。

Desplazamiento de columnas

Se puede usar la.large-offset-*(o.small-offset-*) clase para mover las columnas hacia la derecha. El número de columnas del margen exterior izquierdo se controla con el signo *:

Columnas incompletas

Si la suma del número de columnas en una fila no es 12, Foundation flotará automáticamente la última columna hacia la derecha y usará espacios en blanco para rellenar las columnas restantes.

Clase opcional.endse utiliza para hacer flotar los elementos de la última columna hacia la izquierda:

Pantalla ancha

La cuadrícula (.row) tiene un tamaño máximo (max-width) de 62.5rem. En dispositivos de pantalla ancha, el tamaño puede ser mayor que 62.5rem, por lo que las columnas no pueden llenar completamente la página, incluso si el ancho se establece al 100%. Pero podemos establecer un nuevo max-width mediante CSS:

Si deseas usar el max-width predeterminado, pero el color de fondo necesita abarcar toda la página, entonces usa la clase en el elemento contenedor.rowy especifica el color de fondo que necesites: