Sistema de malla y modularidad

1) Por qué la malla

• acelera el diseño y desarrollo (lenguaje común: «12 columnas, gutter 24»),
• reduce la carga cognitiva (ritmo uniforme, líneas estables),
• mejora la portabilidad de los componentes entre páginas,
• le permite construir una biblioteca modular sin un «micro servidor».

2) Elementos básicos de la cuadrícula

Contenedor: ancho máximo de contenido, área centrada.
Columnas - áreas verticales para la colocación de módulos.
Gutter - Espacio horizontal entre columnas.
Margen - márgenes externos a la izquierda/derecha del contenedor.
Row/Track es una guía horizontal (en CSS Grid, filas/pistas).
Baseline es una rejilla vertical de tipografía.

Ritmo vertical recomendado: 8-pt (a veces 4-pt para matices), unidades de tamaño y sangría múltiplo 4/8.

3) Breakpoints y contenedores

• El contenedor es un mapa de bits (fix. max-width) en pantallas grandes, fluid - en móviles.
• Gutter puede aumentar suavemente a grandes breakpoints.
• Columnas - 4/6/8/12 como «conjunto principal».

4) Modularidad y densidad

El módulo es un bloque de contenido que ocupa 1..N columnas y múltiplos de altura baseline.

• Comfort (dashboards, lectura): fuentes más grandes, sangría 16-24.
• Compact (tablas, modo pro): fuentes +0/−1 px, sangría vertical −4/−8, alturas de fila fijas (múltiplo de 8).

Los componentes deben tener dos presets de densidad mínima.

5) Tipografía y malla baselina

Seleccione una línea de altura básica (por ejemplo, 24 px) y sincronice las alturas de los elementos (botones 40/48/56 px múltiplos de baseline).
Los titulares fijan los ritmos verticales: sangría sobre/bajo múltiplos de 8.
Alinee los iconos con la altura del texto.

6) Plantillas de distribución

6. 1 Tarjetas (tarjetas)

Malla: mosaico (fix. anchura de la tarjeta) o columna (tarjeta = N columnas).
Alturas mínimas de contenido para evitar «saltos» cuando se carga; skeleton dentro de la tarjeta.
Padding interno: 16/20/24 dependiendo del rompimiento.

6. 2 Tablas

Contenedor para toda la anchura; Congelar la primera columna/tapa con el scroll horizontal.
Celdas - baseline-múltiplos; las columnas numéricas se alinean por descarga/decimal.
En XS, «filas de cartas» (stacked layout) en lugar de un scroll horizontal si hay demasiadas columnas.

6. 3 Formularios

De una sola columna en XS/SM, de dos o tres columnas en MD + (teniendo en cuenta la lógica de tabúes/secciones).
El campo + etiqueta + texto help se ajusta a un módulo común (las alturas son múltiples de 8).

6. 4 Dashboards

Grid con pistas fijas y nubes (areas) para la estabilidad.
Los widgets tienen una anchura mínima y máxima en las columnas; alturas - múltiplos de baseline.
Con resaize - cambia la cola en las columnas, no aplastamos los widgets arbitrariamente.

7) Adaptabilidad, auto-layout y comportamiento

El contenido está por delante de la cuadrícula: la cuadrícula se ajusta al contenido en lugar de romperlo.

• Utilice constraints (left/right/center) y auto-layout para tarjetas/listas.
• Admita opciones de componente para XS/SM/MD/LG (cambian los paddings, el orden de las ranuras).

• A nivel de sección, CSS Grid (áreas, columnas, filas).
• Dentro de los componentes, Flex (ejes, equilibrio de espacios).

8) CSS Grid/Flex - Taller

css
.container {
max-width: 1280px; margin: 0 auto; padding: 0 16px;
display: grid; gap: 24px;
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.col-4 { grid-column: span 4; }
@media (max-width: 1199px) {
.container { grid-template-columns: repeat(8, 1fr); gap: 20px; }
.col-4 {grid-column: span 8; }/full-width card/
}
@media (max-width: 839px) {
.container { grid-template-columns: repeat(6, 1fr); gap: 16px; }
}
@media (max-width: 599px) {
.container { grid-template-columns: repeat(4, 1fr); }
}

css
.dashboard {
display: grid; gap: 24px;
grid-template:
"kpi kpi chart chart" auto
"tbl tbl chart chart" 1fr / 1fr 1fr 1fr 1fr;
}
.kpi  { grid-area: kpi; }
.chart { grid-area: chart; }
.tbl  { grid-area: tbl; }
@media (max-width: 1199px) {
.dashboard { grid-template:
"kpi" auto "chart" auto "tbl" 1fr / 1fr; }
}

9) Sangría y tokens

Fije la escala en el sistema de diseño.

json
{
"space": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32, "3xl": 48 },
"container": { "sm": 584, "md": 808, "lg": 1152, "xl": 1320 },
"gutter": { "sm": 16, "md": 20, "lg": 24, "xl": 32 },
"columns": { "xs": 4, "sm": 6, "md": 8, "lg": 12 }
}

• Las sangrías internas de los componentes son de 'espacio'.
• Los campos exteriores de los contenedores son de 'gutter '/' margin'.
• Las alturas de los elementos son múltiples de 8 (40/48/56).

10) Componentes modulares

• saber cuántas columnas ocupa en cada breakpoint;
• tener dimensiones mínimas/máximas;
• no depender de píxeles «mágicos» - sólo tokens;
• mantener la cuadrícula interna (título, contenido, revestimiento) en el baseline.

11) Imágenes y medios de comunicación

Fijar aspect-ratio (por ejemplo, 16/9, 4/3, 1/1) para previsualizaciones y tarjetas.

css
.media { aspect-ratio: 16 / 9; object-fit: cover; }

En XS, use full-bleed (imagen en los bordes) sólo para promociones, el resto del contenido sigue el contenedor.
El texto de la imagen es sólo en dados/sobremesas, contraste ≥ AA.

12) RTL y localización

La dirección grid es espejo: 'dir = "rtl' y': dir (rtl) '-regulado para sangrías/iconos.
Orden de columnas y áreas «pegajosas» (columnas de frozen) en las tablas: tenga en cuenta el espejado.
La longitud de las filas y las transferencias pueden cambiar las alturas de los módulos: establezca un margen.

13) Especificidad de iGaming

Áreas promocionales y pancartas: parrilla separada con módulos grandes; el texto está siempre en la tinta, el contraste AAA para notificaciones responsables (18 +, límites, riesgos).
Leaders/ratings: tablas con primera columna fija y gorra sticky, números tabulares (tabular-nums), alturas de fila múltiple 8.
Dashboards de jugadores/operaciones: widgets (sesiones, depósitos, RTP, Net Deposits) ocupan 3-6 columnas en 12 grid; reconstruir en cascada a MD/SM.
Tarjetas de torneos: cuadrícula de tarjetas 3 × N (LG), 2 × N (MD), 1 × N (SM/XS); CTA en un lugar permanente.

14) Accesibilidad y enfoque

Los anillos de enfoque no deben romper el ritmo: agregue outline-offset o un pseudoelemento interno.
Tamaños mínimos de clic: 44 × 44 (amb.) / 32 × 32 (escritorio).
No codifique el significado sólo mediante la colocación; guarde las etiquetas de texto y los atributos aria.

15) Rendimiento

Reducir la profundidad de anidamiento de las grasas: 1 grida principal sección + flexiones en el interior.
Evite las sombras/máscaras pesadas en cientos de tarjetas; use estilos «planos» en las listas.
Carga perezosa de contenido de medios; las proporciones fijas impiden CLS.

16) Antipattern

«Cuadrícula al gusto» en cada página → se desmorona la consistencia.
Gutter cambia arbitrariamente por secciones.
Densidades inconsistentes (en una sola pantalla tanto «compacto» como «confort»).
Componentes dependientes de anchos mágicos (sin columnas/tokens).
Tablas con un scroll horizontal en el móvil sin disposición alternativa.
Texto en la imagen sin dados y control de contraste.

17) Lista de comprobación de QA

Estructura

• Las columnas/contenedor/marginas corresponden a breakpoints.
• Gutter es estable dentro de la página.
• Las alturas y las sangrías son múltiples de 8.

Componentes

• Los anchos de columna (XS.. XL) y min/max están definidos.
• Las mallas internas están alineadas con la baselina.

Tablas/formularios

• Gorra Sticky/primera columna; modo stacked en XS.
• Campos de formulario múltiplo de baseline; la etiqueta/texto help no «salta».

A11y

• Los estilos focales no rompen el ritmo; zonas clics ≥ mínimas.

Performance

• No hay CLS debido a los bloques de medios; carga perezosa habilitada.

18) Tokens y documentación en el sistema de diseño

• los valores 'container', 'columns', 'gutter', 'space', baseline;
• Ejemplos de distribuciones (tarjetas/tablas/formularios/dashboards);
• presets de densidad (Comfort/Compact) y su efecto sobre los componentes;
• código-snippets para CSS Grid/Flex y Figma-styles/Leyout.

Resumen breve

La malla es un contrato entre diseño y desarrollo. Fije breakpoints, contenedores, altavoces y el ritmo de 8 pt, formalice tokens y plantillas de diseño, proporcione opciones de densidad, adaptabilidad y disponibilidad. Entonces las páginas se escalan previsiblemente, los componentes se reutilizan y el comando trabaja más rápido y estable.