Grids

El sistema de grid define la estructura base para organizar el contenido en las interfaces. Permite mantener consistencia, alineación y jerarquía visual en todos los productos.

Grid Desktop

En resoluciones desktop se utiliza una grid de 12 columnas.

Características

12 columnas flexibles.
Distribución proporcional del contenido.
Permite múltiples combinaciones (6-6, 4-4-4, 3-3-3-3, 8-4, etc.).
Alineación consistente entre secciones.

Grid Responsive

En resoluciones móviles y tablets se utiliza una grid de 4 columnas.

Características

4 columnas adaptables.
Mayor legibilidad y jerarquía vertical.
Facilita el apilamiento de contenido.
Reduce la complejidad visual.

Grid Estructural (Layout Base)

Además de la grid de columnas, se maneja una estructura base compuesta por 3 áreas principales distribuidas en filas.

Fila superior: Top Header
Fila intermedia: Menú / Navegación
Fila inferior: Footer

Distribución

2 filas superiores destinadas a navegación y contexto (Top Header + Menú).
1 fila inferior destinada al Footer.
El contenido principal se integra dentro de la grid de 12 o 4 columnas según el breakpoint.