Grilla

Columnas y filas

Las columnas y las filas crean líneas clave que son esenciales para el ritmo visual, especialmente para la tipografía. Debemos construir columnas dividiendo un espacio en una cuadrícula fluida o colocando cuadros fijos en múltiplos.

Márgenes

Los márgenes en el borde exterior de la cuadrícula son siempre de un tamaño fijo dentro de un breakpoint, incluso cuando las columnas son fluidas. 

Padding

El padding siempre es un múltiplo fijo de mini unidades: 16 píxeles en todos los breakpoints estándar. Alinee siempre el tipo con el borde del relleno de la caja. 

Gutters

Los gutters en la grilla pueden estar ausentes o presentes. El margen alrededor de cada cuadro de cuadrícula coincide con su relleno, para un gutte total de 32 píxeles. Para contenido estrechamente relacionado, considere una grilla sin gutters. Aplique gutters cuando el contenido amerite más separación.

Breakpoints

Use los breakpoints para mantener la integridad del diseño en todos los tamaños de pantalla. Para obtener los mejores resultados, pruebe los diseños y el código en cada uno de estos puntos de interrupción estándar.

Grilla fluida

Las estructuras de columnas fluidas son ideales para contenido editorial, paneles, imágenes, videos, visualizaciones de datos, etc. En cada caso, escalar el tamaño de las cosas es más útil para el usuario que escalar el número de cosas visibles. En una cuadrícula fluida, dividimos el ancho disponible por la mitad para crear columnas, repitiendo según sea necesario.

En cada breakpoint, el recuento de columnas es fijo y el ancho de columna es un múltiplo de mini unidades. La altura de la fila es un múltiplo del tamaño de la columna, siguiendo las relaciones de aspecto recomendadas. El margen y el padding son múltiplos fijos de mini unidades. Entre los puntos de interrupción, el ancho real de la columna es un porcentaje del área de la cuadrícula, no un mini unidad múltiple. El contenido escala de forma fluida.

Cajas fijas

Se puede formar una grilla con cuadros fijos organizando mosaicos en un bloque en línea, iconos en barras de herramientas, etc. El recuento de columnas aumenta con el ancho del navegador. Los mosaicos se envuelven a la siguiente línea.

Cajas híbridas

Los cuadros híbridos tienen diferentes reglas de escala en cada dimensión, por lo que no usan relaciones de aspecto. Cuando un usuario redimensione el navegador esperando que el contenido se escale en una dimensión pero no en la otra, use cuadros híbridos.