Fundación - The Grid

Descripción

El sistema de cuadrícula de cimientos escala hasta 12 columnas en la página. Los sistemas de cuadrícula se utilizan para crear diseños de página a través de una serie de filas y columnas que albergan su contenido.

Opciones de cuadrícula

La siguiente tabla explica brevemente cómo funciona el sistema de rejilla Foundation en varios dispositivos.

	Dispositivos pequeños Teléfonos (<640px)	Dispositivos medianos Tablets (> = 640px)	Dispositivos grandes Computadoras portátiles y de escritorio (> = 1200px)
Comportamiento de la cuadrícula	Horizontal en todo momento	Contraído al inicio, horizontal sobre los puntos de interrupción	Contraído al inicio, horizontal sobre los puntos de interrupción
Prefijo de clase	.pequeña-*	.medio-*	.grande-*
Número de columnas	12	12	12
Encajable	si	si	si
Compensaciones	si	si	si
Orden de columnas	si	si	si

Estructura básica de una rejilla de cimentación

La siguiente es la estructura básica de una cuadrícula de fundación:

<div class = "row">
   <div class = "small-*"></div>
   <div class = "medium-*"></div>
   <div class = "large-*"></div>
</div>

<div class = "row">
   ...
</div>

• Primero, cree una clase de fila para crear grupos horizontales de columnas.

• El contenido debe colocarse dentro de las columnas y solo las columnas pueden ser los hijos inmediatos de las filas.

• Las columnas de la cuadrícula se crean especificando el número de doce columnas disponibles que desea abarcar. Por ejemplo, para cuatro columnas iguales usaríamos .large-3

Las siguientes son las tres clases utilizadas en el sistema de rejilla Foundation:

No Señor.	Clases y descripción básica de Grid
1	Grande Las clases grandes * se utilizan para los dispositivos grandes.
2	Medio La clase media- * se utiliza para los dispositivos medios.
3	Pequeña small- * class se utiliza para los dispositivos pequeños.

Cuadrícula avanzada

Los siguientes son los formatos de cuadrícula avanzados que se utilizan en Foundation.

No Señor.	Cuadrículas avanzadas y descripción
1	Columna / fila combinada Las clases de columna y fila se utilizan en el mismo elemento para que la columna de ancho completo se utilice como contenedor.
2	Anidamiento Podemos anidar las columnas de la cuadrícula dentro de otras columnas.
3	Compensaciones Usando la clase large-offset- * o small-offset- * , puede mover las columnas hacia la derecha.
4	Filas incompletas Foundation flota el último elemento automáticamente a la derecha cuando las filas no incluyen columnas hasta 12.
5	Contraer / Descontraer filas Usando el tamaño de la consulta de medios, las clases de colapso y uncollapse se incluyen en el elemento de fila para mostrar los rellenos.
6	Columnas centradas Al incluir la clase centrada en pequeño en la columna, puede hacer que la columna esté en el centro.
7	Ordenamiento de fuente La clase de orden de fuente se usa para cambiar las columnas entre el punto de interrupción.
8	Cuadrículas de bloque La cuadrícula de bloques se utiliza para dividir el contenido.

Construyendo Semánticamente

Usando el conjunto de mixins de SASS, se genera una cuadrícula CSS que se usa para construir su propia cuadrícula semántica. Para más información haga clic aquí.

Referencia SASS

Las siguientes son la referencia de SASS para la cuadrícula utilizada en Foundation.

No Señor.	Cuadrículas básicas y descripción
1	Variables Usando las variables sass podemos modificar los estilos predeterminados de este componente.
2	Mixins La salida CSS final se crea utilizando el mixin.