Cuadrícula

Anatomía de la cuadrícula

La estructura de la cuadrícula de diseño tiene tres elementos:

• Las columnas dividen la página en secciones verticales iguales y se utilizan para organizar el contenido.
• Los canales son los espacios entre las columnas y separan el contenido de manera consistente.
• Los márgenes definen los bordes exteriores de la cuadrícula y evitan que el contenido se derrame fuera de las regiones visibles.

Esta documentación de cuadrícula es solo para diseño. Los desarrolladores deben consultar el componente de [diseño de página].

Tipos de cuadrícula

Existen dos tipos de cuadrícula: fluida y fija. Ambos tipos utilizan puntos de interrupción para determinar si el diseño debe cambiar entre los tamaños de las ventanas gráficas.

Más orientación para [aplicar la cuadrícula] en sus diseños.

Fluida

La cuadrícula fluida se extiende por la pantalla para ocupar todo el espacio disponible en el área de contenido principal. Esto significa que las columnas y el contenido que contienen se escalan y redimensionan para ocupar el espacio disponible.

Se recomiendan para páginas con mucha información, como dahboard, para maximizar el espacio en pantalla.

Fija

La cuadrícula fija aplica el ancho máximo ideal a los contenedores de página según los elementos mostrados. Existe una cuadrícula fija estrecha y otra fija ancha, lo que permite mostrar el contenido con el ancho más adecuado.

Las cuadrículas estrechas fijas son ideales para páginas centradas en el contenido, como blogs y artículos, para limitar la longitud de las líneas y mejorar la legibilidad. Algunos elementos internos, como los encabezados, pueden salirse de la cuadrícula y extenderse por toda la página. Así es como se aplica una cuadrícula estrecha fija en Confluence:

Las cuadrículas de ancho fijo son ideales para páginas con mucho contenido, como tablas de datos, para optimizar el espacio en pantalla y la legibilidad. Las columnas internas de la tabla no necesitan alinearse con la cuadrícula. Así es como se aplica una cuadrícula de ancho fijo en Atlas:

Puntos de interrupción

Cada punto de interrupción marca el umbral a partir del cual cambia el diseño del sitio web para garantizar una experiencia de usuario óptima. En el diseño adaptable, un rango de puntos de interrupción determina el número de columnas más adecuado para ese tamaño de ventana gráfica, además de los anchos recomendados para márgenes y medianiles.

Nuestra cuadrícula se alinea con los 6 puntos de interrupción del Sistema de Diseño Gstock: