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. |