Sistem grilă și modularitate

1) De ce plasă

• accelerează proiectarea și dezvoltarea (limbaj comun: „12 coloane, jgheab 24”)
• reduce sarcina cognitivă (chiar ritm, linii stabile),
• Crește portabilitatea componentelor între pagini
• vă permite să construiți o bibliotecă modulară fără „microlay”.

2) Elemente de plasă de bază

Container - lățimea maximă a conținutului, zona centrată.
Coloane - zone verticale pentru plasarea modulelor.
Jgheab - spațiu orizontal între coloane.
Marja - câmpuri externe la stânga/dreapta a containerului.
Row/Track - ghid orizontal (în CSS Grid - linii/piste).
Linia de bază - grila de tipografie verticală.

Ritm vertical recomandat: 8-pt (uneori 4-pt pentru nuanțe), unități de dimensiuni și liniuțe sunt multipli de 4/8.

3) Puncte de rupere și containere

• Container raster (fix. lățime maximă) pe ecrane mari, fluid - pe mobil.
• Jgheabul poate crește fără probleme la puncte de întrerupere mari.
• Coloane - 4/6/8/12 ca „set de bază”.

4) Modularitate și densități

Modul - un bloc de conținut care ocupă 1..N coloane și multipli de înălțimi de bază.

• Confort (tablouri de bord, citire): fonturi mai mari, liniuțe 16-24.
• Compact (tabele, pro-mod): fonturi + 0/ − 1 px, liniuțe verticale − 4/ − 8, înălțimile rândului sunt fixe (multipli de 8).

Componentele trebuie să aibă două presetări de densitate minimă.

5) Tipografie și grila de bază

Selectați înălțimea de bază a liniei (de exemplu, 24 px) și sincronizați înălțimile elementelor (butoanele 40/48/56 px sunt multipli ai liniei de bază).
Rubricile ancoră ritmuri verticale: liniuțele de mai sus/de mai jos sunt multipli de 8.
Aliniaţi pictogramele la înălţimea textului.

6) Șabloane de aspect

6. 1 Carduri

Grilă: mozaic (fix. lățimea cardului) sau coloană (card = N coloane).
Înălțimi minime de conținut pentru a evita „săriturile” la încărcare; schelet în interiorul cardului.
Căptușeală internă: 16/20/24 în funcție de punctul de rupere.

6. 2 Tabele

Container cu lățime completă; înghețați prima coloană/capac atunci când defilați orizontal.
Celulele sunt de bază; coloanele numerice sunt aliniate cu cifre/zecimale.
Pe XS - „aranjament stivuit” în loc de defilare orizontală dacă există prea multe coloane.

6. 3 Formulare

O singură coloană pe XS/SM, două sau trei coloane pe MD + (ținând cont de logica filelor/secțiunilor).
Câmpul + eticheta + textul de ajutor se potrivesc într-un modul comun (înălțimile sunt multipli de 8).

6. 4 Tablouri de bord

Grilă cu piste fixe și nori (zone) pentru stabilitate.
Widget-urile au lățimi minime și maxime în coloane; înălțimile sunt multipli ai liniei de bază.
La resaying - numărul de coloane se schimbă, nu împărțiți arbitrar widget-urile.

7) Adaptabilitate, auto-aspect și comportament

Conținut în fața grilei: Grila se adaptează conținutului, mai degrabă decât ruperea acestuia.

• Utilizați constrângeri (stânga/dreapta/centru) și auto-layout pentru carduri/liste.
• Opțiuni de componente de asistență pentru XS/SM/MD/LG (schimbarea padingurilor, ordinea sloturilor).

• La nivel de secțiune - CSS Grid (zone, coloane, rânduri).
• În interiorul componentelor - Flex (axe, echilibru de spații).

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) Liniuțe și jetoane

Scale de captare în sistemul de proiectare.

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

• Liniile interne ale componentelor sunt din „spațiu”.
• Câmpurile exterioare ale containerelor sunt de la „jgheab ”/„ marjă”.
• Înălțimile elementelor sunt multipli de 8 (40/48/56).

10) Componente modulare

• știu câte coloane este nevoie pe fiecare breakpoint;
• au dimensiuni minime/maxime;
• nu depindeți de pixeli „magici” - numai jetoane;
• păstrați grila internă (titlu, conținut, subsol) pe linia de bază.

11) Imagini și porțiuni media

Fixați raportul de aspect (de ex. 16/9, 4/3, 1/1) pentru previzualizări și cărți.

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

Pe XS, utilizați sângerare completă (imagine în jurul marginilor) numai pentru promo, restul conținutului urmează containerul.
Text imagine - numai pe alunecări/suprapuneri, contrast ≥ AA.

12) RTL și localizare

Direcția grilei oglindește: 'dir =' rtl' și ': dir (rtl)' -rules pentru liniuțe/pictograme.
Ordinea coloanelor și coloanele înghețate în tabele - luați în considerare oglindirea.
Lungimea liniilor și transferurile pot schimba înălțimile modulelor - stabilesc stocul.

13) Specificul iGaming

Zone promoționale și bannere: o grilă separată cu module mari; textul este întotdeauna pe placă, contrast AAA pentru notificări critice (18 +, limite, riscuri).
Lideri/evaluări: tabelele cu o primă coloană fixă și un antet lipicios, numerele tabulare (numere tabulare), înălțimile rândului sunt multipli de 8.
Tablouri de bord ale jucătorilor/operațiunilor: widget-uri (sesiuni, depozite, RTP, depozite nete) ocupă 3-6 coloane pe o grilă de 12; cascadă reconstrui pe MD/SM.
Carduri de turneu: grila de carduri 3 × N (LG), 2 × N (MD), 1 × N (SM/XS); CTA într-o locaţie permanentă.

14) Accesibilitate și concentrare

Inelele de focalizare nu trebuie să rupă ritmul: adăugați contur-offset sau un pseudo-element intern.
Dimensiune minimă clic: 44 × 44 (mobil )/32 × 32 (desktop).
Nu codifica sensul doar prin plasare; Salvați etichetele de text și atributele Aria.

15) Performanță

Reduceți adâncimea grilelor de cuibărit: 1 secțiune principală a grilei + flexuri în interior.
Evitați umbrele/măștile grele pe sute de carduri; Utilizați stiluri plate în liste.
Încărcarea leneșă a conținutului media; proporțiile fixe previn CLS.

16) Antipattern

„Grilă pentru a gusta” consistență → se prăbușește pe fiecare pagină.
Jgheabul variază arbitrar în funcție de secțiune.
Densități inconsecvente (atât compact și confort într-un singur ecran).
Componente dependente de lățimea magică (fără coloane/jetoane).
Tabele cu defilare orizontală pe mobil fără aspect alternativ.
Text în imagine fără moare și control de contrast.

17) Lista de verificare QA

Structura

• Coloanele/containerul/marginile corespund punctelor de întrerupere.
• Jgheabul este stabil în cadrul paginii.
• Înălțimile și liniuțele sunt multipli de 8.

Componente

• Lățimi de coloană (XS.. XL) și min/max sunt definite.
• Grilele interne sunt aliniate cu linia de bază.

Tabele/formulare

• Capac lipicios/prima coloană; modul stivuit pe XS.
• Câmpurile de formular sunt multipli ai liniei de bază; etichetă/ajutor text nu „sari”.

A11y

• Focus stiluri nu rupe ritmul; zonele clicii ≥ minime.

Performanță

• Nici un CLS din cauza blocurilor media; încărcarea leneșă este activată.

18) Jetoane și documentație în sistemul de proiectare

• valorile „container”, „coloane”, „jgheab”, „spațiu”, linie de bază;
• exemple de machete (carduri/tabele/formulare/tabele de bord);
• presetările de densitate (Comfort/Compact) și efectul lor asupra componentelor;
• fragmente de cod pentru CSS Grid/Flex și Figma stiluri/machete.

Scurt rezumat

Grid este un contract între proiectare și dezvoltare. Capturați puncte de întrerupere, containere, boxe și ritm de 8 pt, proiectați jetoane și șabloane de aspect, oferiți opțiuni de densitate, adaptabilitate și disponibilitate. Apoi paginile scalează previzibil, componentele sunt reutilizate, iar comanda este mai rapidă și mai stabilă.