Système maillé et modularité

1) Pourquoi la grille

• accélère la conception et le développement (langage commun : « 12 colonnes, gutter 24 »),
• réduit la charge cognitive (rythme régulier, lignes stables),
• améliore la portabilité des composants entre les pages,
• permet la construction d'une bibliothèque modulaire sans « micro-vis ».

2) Éléments de maillage de base

Conteneur - largeur maximale du contenu, zone centrée.
Colonnes : Zones verticales pour l'emplacement des modules.
Gutter est l'intervalle horizontal entre les colonnes.
Margin est le champ extérieur à gauche/à droite du conteneur.
Row/Track est un guide horizontal (dans CSS Grid, des lignes/pistes).
Baseline est la grille verticale de la typographie.

Rythme vertical recommandé : 8-pt (parfois 4-pt pour les nuances), les unités de taille et les indentations sont multiples de 4/8.

3) Breakpoints et conteneurs

• Le conteneur est bitmap (fix. max-width) sur les grands écrans, fluid sur les mobiles.
• Gutter peut augmenter en douceur vers les grands breakpoints.
• Les colonnes sont 4/6/8/12 en tant que « ensemble principal ».

4) Modularité et densité

Le module est un bloc de contenu qui occupe 1..N colonnes et des multiples de la hauteur baseline.

• Comfort (dashboards, lecture) : plus grandes polices, tirets 16-24.
• Compact (tables, mode pro) : polices + 0/ − 1 px, tirets verticaux − 4/ − 8, hauteurs de lignes fixes (multiple de 8).

Les composants doivent avoir deux préréglages de densité minimum.

5) Typographie et grille baseline

Sélectionnez line-height de base (par exemple, 24 px) et synchronisez les hauteurs des éléments (les boutons 40/48/56 px sont des multiples de baseline).
Les titres fixent les rythmes verticaux : les retraits sur/sous sont multiples de 8.
Alignez les icônes sur le capot du texte.

6) Modèles de disposition

6. 1 Cartes (cards)

Grille : mosaïque (fix. largeur de la carte) ou colonne (carte = N colonnes).
Des hauteurs minimales de contenu pour éviter les « sauts » lors du chargement ; skeleton dans les limites de la carte.
Padding interne : 16/20/24 en fonction du breakpoint.

6. 2 Tableaux

Conteneur pour toute la largeur ; geler la première colonne/casquette dans le scroll horizontal.
Les cellules sont des multiples de baseline ; les colonnes numériques sont alignées en chiffres/décimales.
Sur XS, les « chaînes de cartes » (stacked layout) remplacent le scroll horizontal s'il y a trop de colonnes.

6. 3 Formes

Mono-colonne sur XS/SM, deux ou trois colonnes sur MD + (compte tenu de la logique des tabliers/sections).
Le champ + label + texte help est placé dans le module commun (les hauteurs sont multiples de 8).

6. 4 Dashboards

Grid avec pistes fixes et nuages (areas) pour la stabilité.
Les widgets ont une largeur minimale et maximale dans les colonnes ; les hauteurs sont multiples de la baseline.
Lors de la récupération - change de colle dans les colonnes, ne fractionnons pas les widgets arbitrairement.

7) Adaptabilité, auto-layout et comportement

Contenu devant la grille : la grille s'adapte au contenu plutôt que de le casser.

• Utilisez constraints (left/right/center) et auto-layout pour les cartes/listes.
• Prendre en charge les variantes de composant pour XS/SM/MD/LG (changement de paddings, ordre des slots).

• Au niveau des sections, CSS Grid (zones, colonnes, lignes).
• L'intérieur des composants est Flex (axes, équilibre des espaces).

8) CSS Grid/Flex - atelier

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) Retraits et jetons

Fixez l'échelle dans le système de conception.

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

• Les retraits internes des composants proviennent de 'space'.
• Les champs extérieurs des conteneurs sont de 'gutter '/' margin'.
• Les hauteurs des éléments sont multiples de 8 (40/48/56).

10) Composants modulaires

• savoir combien de colonnes il occupe à chaque breakpoint ;
• avoir des dimensions minimales/maximales ;
• ne pas dépendre des pixels « magiques » - seuls les tokens ;
• garder la grille interne (titre, contenu, pantoufle) sur la baseline.

11) Images et diffusions de médias

Enregistrez l'aspect-ratio (p. ex. 16/9, 4/3, 1/1) pour les prévisualisations et les cartes.

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

Sur XS, utilisez full-bleed (image sur les bords) uniquement pour les promos, le reste du contenu suit le conteneur.
Le texte de l'image est uniquement sur les couvertures/overleys, le contraste est ≥ AA.

12) RTL et localisation

La direction grid est en miroir : 'dir = « rtl » et' : dir (rtl) 'a gouverné pour les retraits/icônes.
Ordre des colonnes et zones « collantes » (columns frozen) dans les tableaux - prendre en compte la mise en miroir.
La longueur des lignes et les transferts peuvent changer la hauteur des modules - placez une réserve.

13) Spécificité iGaming

Zones promotionnelles et bannières : grid séparé avec de grands modules ; le texte est toujours sur la planche, contraste AAA pour les notifications responsables (18 +, limites, risques).
Leaders/classements : tables avec une première colonne fixe et un chapeau sticky, les nombres sont tabulaires (tabular-nums), les hauteurs de lignes sont multiples de 8.
Dashboards joueurs/opérations : Les widgets (sessions, dépôts, RTP, Net Deposits) occupent 3-6 colonnes sur le 12-grid ; la reconstruction est en cascade sur MD/SM.
Cartes de tournoi : grille de cartes 3 × N (LG), 2 × N (MD), 1 × N (SM/XS) ; CTA à un endroit permanent.

14) Accessibilité et focus

Les anneaux de focus ne doivent pas briser le rythme : ajouter un outline-offset ou un pseudo-élément interne.
Dimensions minimales du clic : 44 × 44 (mob.) / 32 × 32 (bureau).
Ne pas coder le sens uniquement par le placement ; conservez les étiquettes de texte et les attributs aria.

15) Performance

Réduisez la profondeur de l'imbrication des grids : 1 grid principal de la section + flex à l'intérieur.
Éviter les ombres lourdes/masques sur des centaines de cartes ; Utilisez des styles « plats » dans les listes.
Chargement paresseux du contenu multimédia ; des proportions fixes empêchent le CLS.

16) Anti-modèles

La « grille du goût » sur chaque page → la consistance s'effondre.
Gutter change arbitrairement par section.
Densités incohérentes (dans un écran à la fois « compact » et « confort »).
Composants dépendants des larves magiques (sans colonnes/jetons).
Tables avec scroll horizontal sur mobile sans disposition alternative.
Texte sur l'image sans placard et contrôle de contraste.

17) Liste de vérification QA

Structure

• Les colonnes/conteneur/margines correspondent aux breakpoints.
• Gutter est stable à l'intérieur de la page.
• Les hauteurs et les indentations sont multiples de 8.

Composants

• Les largeurs de colonne (XS.. XL) et min/max sont définies.
• Les grilles internes sont alignées avec la baseline.

Tableaux/formulaires

• Sticky-chapeau/première colonne ; mode stacked sur XS.
• Les champs de formes sont multiples de baseline ; le label/texte help ne « saute » pas.

A11y

• Les styles de focus ne brisent pas le rythme ; les zones de clic ≥ minimes.

Performance

• Pas de CLS à cause des médias ; le téléchargement paresseux est activé.

18) Tokens et documentation dans le système de conception

• les valeurs « container », « columns », « gutter », « space », baseline ;
• exemples de disposition (cartes/tableaux/formulaires/dashboards) ;
• les presets de densité (Comfort/Compact) et leurs effets sur les composants ;
• codes-clips pour CSS Grid/Flex et Figma styles/leyauts.

Résumé succinct

La grille est un contrat entre le design et le développement. Fixez les pauses, les conteneurs, les colonnes et le rythme 8-pt, les jetons et les modèles de mise en page, assurez la densité, l'adaptabilité et la disponibilité. Les pages sont alors mises à l'échelle de manière prévisible, les composants sont réutilisés et la commande est plus rapide et plus stable.