Grilla

La grilla es la estructura invisible que organiza el contenido en pantalla. Define columnas, márgenes y espacios que permiten alinear elementos de forma consistente, facilitando la lectura y manteniendo el orden visual en diferentes tamaños de dispositivo.

En los servicios digitales del Estado, una grilla bien aplicada mejora la experiencia de navegación, reduce la carga cognitiva y asegura que formularios, tablas y bloques de contenido se perciban como parte de un mismo sistema.

Principios

• Consistencia: utiliza la misma estructura de grilla en todas las pantallas del servicio.
• Flexibilidad: adapta el número de columnas según el tamaño del dispositivo.
• Jerarquía: aprovecha el ancho de las columnas para destacar contenido principal.
• Alineación: mantén los elementos alineados a las guías de la grilla.

Estructura base

El sistema utiliza una grilla de 12 columnas como base, con márgenes laterales y separaciones internas (gutters) consistentes.

Los valores son referenciales y deben validarse con la implementación vigente del sistema.

Uso en diseño

En Figma, activa las guías de grilla del archivo UI Pacífico para alinear componentes y secciones. Respeta los márgenes definidos y evita colocar elementos fuera de las columnas establecidas.

Uso en código

El sistema de grilla se implementa mediante clases utilitarias basadas en Bootstrap. Utiliza las clases de columna (col-*) y contenedor (container) para estructurar el contenido.

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">Columna 1</div>
    <div class="col-12 col-md-6 col-lg-4">Columna 2</div>
    <div class="col-12 col-md-12 col-lg-4">Columna 3</div>
  </div>
</div>

Buenas prácticas