Grid
El sistema define 5 configuraciones de grilla para distintos contextos de uso. El diseño primario es mobile-first con 4 columnas — la app opera principalmente en smartphones de campo. Las vistas de dashboard y desktop tienen 12 columnas para mayor densidad de información.
Breakpoints
Mobile
max-width: 390pxExtraídoApp principal — Gestores y Regionales en campo
4
Columnas
16px
Gutter
16px
Margin
4 Column Grid — Margin 16px, Gutter 16px, Column width Auto
iPad / Tablet
max-width: 768pxExtraídoVista tablet — Gestores en oficina
8
Columnas
16px
Gutter
24px
Margin
Dashboard
max-width: 1440pxExtraídoDashboard de líderes — vista completa de datos
12
Columnas
16px
Gutter
24px
Margin
Desktop SM
max-width: 1140pxExtraídoLaptops — administración y configuración
12
Columnas
24px
Gutter
0 auto
Margin
Desktop LG
max-width: 1320pxExtraídoPantallas grandes — reporting y analytics
12
Columnas
24px
Gutter
0 auto
Margin
Resumen comparativo
| Breakpoint | Max Width | Columnas | Gutter | Margin |
|---|---|---|---|---|
Mobile grid.mobile | 390px | 4 | 16px | 16px |
iPad / Tablet grid.ipad | 768px | 8 | 16px | 24px |
Dashboard grid.dashboard | 1440px | 12 | 16px | 24px |
Desktop SM grid.desktop-1140 | 1140px | 12 | 24px | 0 auto |
Desktop LG grid.desktop-1320 | 1320px | 12 | 24px | 0 auto |
Contexto mobile-first
390px
Mobile Grid — Configuración Figma
La app funciona principalmente en campo con smartphones. El 90% de los flujos de Gestores y Regionales están diseñados en este breakpoint.
Reglas de uso
Diseña mobile-first: empieza con 4 columnas y expande
Respeta los márgenes horizontales de cada breakpoint
Usa el breakpoint dashboard (1440px) para vistas de reporting de líderes
Alinea los componentes al grid — nunca posiciones absolutas sin razón
No uses breakpoints intermedios no definidos (ej. 1024px)
No elimines el margen lateral en mobile — mínimo 16px
No diseñes flujos de campo en 12 columnas — los gestores usan móvil
No uses grid de 12 columnas en vistas donde 4 son suficientes
Uso en CSS / Tailwind
/* Layout base mobile (4 columnas) */
.page-wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px; /* --ds-spacing-size-16 */
padding-inline: 16px; /* margin lateral mobile */
}
/* Dashboard / Desktop (12 columnas) */
@media (min-width: 1140px) {
.page-wrapper {
grid-template-columns: repeat(12, 1fr);
gap: 24px;
max-width: 1320px;
margin-inline: auto;
}
}
/* Tailwind equivalentes */
/* Mobile: grid grid-cols-4 gap-4 px-4 */
/* Desktop: md:grid-cols-12 md:gap-6 md:px-0 */