Grid
La cuadrícula se utiliza para posicionar contenido y crear diseños de página consistentes.
Anatomía de la cuadrícula
La estructura de la cuadrícula de diseño tiene tres elementos:
- Las columnas (Columns) dividen la página en secciones verticales iguales y se utilizan para organizar el contenido.
- Los canales (Gutters) son los espacios entre las columnas y separan el contenido de manera consistente.
- Los márgenes (Margins) definen los bordes exteriores de la cuadrícula y evitan que el contenido se desborde de las regiones visibles.
Tipos de cuadrícula
Existen dos tipos de cuadrícula: fluida y fija. Ambos tipos de cuadrícula utilizan puntos de interrupción para determinar si es necesario cambiar el diseño entre los distintos tamaños de ventana gráfica.
Fluida
La cuadrícula fluida se extiende por la pantalla para llenar todo el espacio disponible en el área de contenido principal. Esto significa que las columnas y el contenido que se coloca dentro de ellas se escalan y redimensionan para llenar el espacio disponible.
- Se utilizan mejor en páginas con mucha información, como tableros Kanban, para maximizar el espacio en pantalla.
- Las cuadrículas fluidas llenan el ancho de la pantalla.
Utilice cuadrículas fluidas para páginas con mucha información, como tableros kanban, para maximizar el espacio en la pantalla.
No utilice cuadrículas fluidas para páginas centradas en el contenido. Las líneas muy largas perjudican la legibilidad.
Fija
La cuadrícula fija aplica el ancho máximo ideal a los contenedores de páginas según los elementos que se muestran. Hay cuadrículas fijas estrechas y fijas anchas, por lo que el contenido se puede mostrar utilizando el ancho más adecuado.
- Las cuadrículas fijas se estiran hasta un ancho máximo y luego permanecen centradas
Utilice cuadrículas fijas para páginas centradas en el contenido, como blogs y artículos, para mejorar la legibilidad.
No utilice cuadrículas fijas para páginas con mucha información. Limitar el espacio en la pantalla truncará contenido importante.
Las cuadrículas estrechas fijas (Fixed-narrow) se utilizan mejor en 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. A continuación, se muestra cómo se aplica una cuadrícula estrecha fija en Confluence:
Las cuadrículas de ancho fijo (Fixed-wide) se utilizan mejor en páginas con mucho contenido, como tablas de datos, para equilibrar el espacio en pantalla y la legibilidad. Las columnas de tabla internas no necesitan alinearse con la cuadrícula. A continuación, se muestra cómo se aplica una cuadrícula de ancho fijo en Atlas:
Breakpoints
Cada Punto de interrupción (Breakpoint) es el umbral en el que cambia el diseño del sitio web para garantizar una experiencia óptima del usuario. En el diseño adaptable, un rango de puntos de interrupción determina la cantidad de columnas más adecuada 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:
| Breakpoint | Viewport | Columns | Gutters | Margins |
|---|---|---|---|---|
| xxs | 320 - 479px | 2 | 12px | 16px |
| xs | 480 - 767px | 6 | 12px | 16px |
| s | 768 - 1023px | 6 | 12px | 16px |
| m | 1024 - 1439px | 12 | 16px | 32px |
| l | 1440 - 1767px | 12 | 16px | 32px |
| xl | 1768+px | 12 | 16px | 32px |
Distancia entre columnas y desplazamiento
Tramo de columna
Nuestra cuadrícula tiene 12 columnas para alinear el contenido . El contenido debe abarcar 3 o más columnas, hasta un máximo de 12. Para lograr flexibilidad, combine la cantidad de columnas utilizadas para desbloquear una variedad de diseños en diferentes puntos de interrupción.
Desplazamiento de columna
No es necesario que el contenido ocupe las 12 columnas. Puede abarcar un conjunto más pequeño de columnas, lo que da como resultado un diseño con el contenido centrado en una cuadrícula de 12 columnas.
