Sistema di rete e modularità

1) Perché una griglia

• accelera il design e lo sviluppo (lingua comune: «12 colonne, gutter 24»),
• riduce il carico cognitivo (ritmo regolare, linee stabili),
• aumenta la portabilità dei componenti tra le pagine,
• consente di costruire una libreria modulare senza «microprocessore».

2) Elementi di base della griglia

Contenitore: larghezza massima del contenuto, area centrata.
Le colonne sono aree verticali per il posizionamento dei moduli.
Gutter è lo spazio orizzontale tra le colonne.
Margin è un campo esterno a sinistra/destra del contenitore.
Row/Track è una guida orizzontale (in CSS Grid - righe/tracce).
Baseline è la griglia verticale della tipografia.

Il ritmo verticale consigliato è 8-pt (a volte 4-pt per le sfumature), unità di dimensioni e rientri sono multipli 4/8.

3) Breakpoint e contenitori

• Contenitore bitmap (fix. max-width) su schermi di grandi dimensioni, fluid su schermi mobili.
• Gutter può aumentare delicatamente a grandi breakpoint.
• Le colonne sono 4/6/8/12 come «set principale».

4) Modularità e densità

Il modulo è un blocco di contenuti che occupa 1 N colonne e multipli di altezza baseline.

• Comfort (dashboard, lettura) è più grande dei caratteri, 16-24.
• Compact (tabelle, pro-mode): caratteri + 0/-1 px, rientri verticali 4/-8, altezza di riga fissa (multiplo 8).

I componenti devono avere due preset di densità minima.

5) Tipografia e griglia baseline

Selezionare la linea base-height (ad esempio 24 px) e sincronizzare le altezze degli elementi (pulsanti 40/48/56 px multipli baseline).
Le intestazioni fissano i ritmi verticali, ovvero il rientro sopra/sotto il multiplo 8.
Allineate le icone alla cappa del testo.

6) Modelli di mappatura

6. 1 Carte (cards)

Griglia - mosaico (fix. larghezza della carta) o del colletto (scheda = N colonne).
Altezza minima del contenuto per evitare «salto» durante il download; skeleton all'interno della carta.
Padding interno: 16/20/24 a seconda del breakpoint.

6. 2 Tabelle

Contenitore per tutta la larghezza; congeliamo la prima colonna/cappello con lo scroll orizzontale.
Celle - baseline-multiple; le colonne numeriche sono allineate a cifre decimali/decimali.
XS - Righe di carte (stacked layout) invece di uno scroll orizzontale se le colonne sono troppe.

6. 3 Moduli

Invertebrati per XS/SM, doppio o triciclo per MD + (in base alla logica delle tabelle/sezioni).
Il campo + etichetta + testo help si inserisce in un modulo comune (altezza multipla 8).

6. 4 Dashboard

Grid con piste e nuvole fisse (areas) per la stabilità.
I widget hanno la larghezza minima e massima nelle colonne; altezza - multipli baseline.
Quando si riceve - Cambia la colonna, non frazioniamo i widget in modo casuale.

7) Adattabilità, auto-layout e comportamento

Contenuto davanti alla griglia: la griglia si adatta al contenuto, non lo rompe.

• Usi constrains (left/right/center) e auto-layout per le schede/elenchi.
• Supporta le opzioni del componente per XS/SM/MD/LG (modifica dei paddings, ordine dei slot).

• A livello di sezione, CSS Grid (aree, colonne, righe).
• All'interno dei componenti, Flex (assi, bilanciamento degli spazi).

8) CSS Grid/Flex - laboratorio

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) Indentazioni e token

Fissare la scala nel sistema di progettazione.

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 }
}

• I rientri interni dei componenti provengono da «space».
• I campi di contenitore esterni sono in «gutter »/« margin».
• Altezza elementi - Multipli 8 (40/48/56).

10) Componenti modulari

• sapere quante colonne prende su ogni breakpoint;
• avere dimensioni minime/massime;
• indipendentemente dai pixel «magici», solo i token;
• mantenere la griglia interna (titolo, contenuto, futer) su baseline.

11) Immagini e proiezioni multimediali

Fissa aspect-ratio (ad esempio 16/9, 4/3, 1/1) per la prevendita e le carte.

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

Su XS utilizzare full-bleed (immagine ai bordi) solo per promo, il resto del contenuto segue il contenitore.
Il testo nell'immagine è solo su piastrelle/overlay, il contrasto di AA.

12) RTL e localizzazione

La direzione grid si specchia: "dir =" rtl "e": dir (rtl) "ha modificato per i ritiri/icone.
Ordine delle colonne e aree appiccicose (frozen columns) nelle tabelle - Tenere presente il mirroring.
Lunghezza delle righe e spostamenti possono cambiare l'altezza dei moduli.

13) Specificità del iGaming

Aree promozionali e banner: grid separati con grandi moduli; testo sempre sulla tinta, contrasto AAA per notifiche responsabili (18 +, limiti, rischi).
Leader/classificazioni: tabelle con prima colonna fissa e cappello sticky, numeri tabulari (tabulo-nums), altezza riga multipla 8.
Dashboard giocatori/operazioni: widget (sessioni, depositi, RTP, Net Deposits) occupano 3-6 colonne al 12-grid; la ricostruzione è a cascata su MD/SM.
Tessere dei tornei: griglia delle schede 3 x N (LG), 2 x N (MD), 1 x N (SM/XS); Il CTA è in posizione permanente.

14) Disponibilità e focus

Gli anelli di fuoco non devono rompere il ritmo: aggiungete outline-offset o pseudoelemento interno.
Dimensioni minime click: 44 x 44 (mob) / 32 x 32 (disctop).
Non codificare il significato solo con il posizionamento; salvare le etichette di testo e gli attributi aria.

15) Prestazioni

Riduce la profondità dei grid: 1 grid principale sezione + flex all'interno.
Evitare ombre pesanti/maschere su centinaia di schede; usate stili piatti negli elenchi.
Caricamento pigro di un lettore multimediale; proporzioni fisse impediscono il CLS.

16) Antipattern

La «griglia di sapore» di ogni pagina si dissolve la consistenza.
Gutter cambia casualmente per sezione.
Densità incoerente (in uno schermo e «CD» e «comfort»).
Componenti che dipendono dalle cortine magiche (senza colonne o token).
Tabelle con scroll orizzontale sul mobile senza mappatura alternativa.
Testo nell'immagine senza piastrelle o controllo del contrasto.

17) Lista assegni QA

Struttura

• Le colonne/contenitore/margine corrispondono ai breakpoint.
• Gutter è stabile all'interno della pagina.
• Le altezze e i rientri sono multipli 8.

Componenti

• Definite le larghezze (XS.. XL) e min/max.
• Le griglie interne sono coerenti con baseline.

Tabelle/moduli

• Sticky cappellino/prima colonna; modalità stacked su XS.
• Campi modulo multiplo baseline; l'etichetta/help testo non salta.

A11y

• Gli stili di attivazione non rompono il ritmo. Le zone click sono minime.

Performance

• Nessun CLS a causa dei supporti multimediali; caricamento pigro attivato.

18) Token e documentazione in progettazione

• i valori container, columns, gutter, space, baseline;
• esempi di mappatura (schede/tabelle/moduli/dashboard)
• preset densità (Comfort/Compact) e il loro impatto sui componenti;
• codice-snippet per CSS Grid/Flex e Figma-stili/leaute.

Breve riepilogo

La griglia è un accordo tra design e sviluppo. Fissate i breakpoint, i contenitori, le colonne e il ritmo di 8 pt, i token e i modelli di mappatura, le opzioni di densità, adattabilità e disponibilità. Le pagine vengono scalate in modo prevedibile, i componenti vengono riutilizzati e il comando è più veloce e stabile.