Sistema de malha e modularidade

1) Porquê a grade

• acelera o design e o desenvolvimento (língua comum: «12 colunas, gutter 24»),
• reduz a carga cognitiva (ritmo alinhado, linhas estáveis),
• aumenta a portabilidade dos componentes entre as páginas,
• permite que você construa uma biblioteca modular sem «microviário».

2) Itens básicos da grade

Contêiner - largura máxima de conteúdo, área centralizada.
As colunas são áreas verticais para acomodar os módulos.
Gutter é o espaço horizontal entre as colunas.
Margin - campos externos à esquerda/direita do contêiner.
Row/Track é uma guia horizontal (em CSS Grid - linhas/faixas).
Baseline é uma grade vertical de tipografia.

O ritmo vertical recomendado é 8-pt (às vezes 4-pt para nuances), unidades de tamanho e recuos são múltiplos 4/8.

3) Breakpoint e contêineres

• O contêiner é bitmap (fix. max-width) em telas grandes, fluid em telas móveis.
• Gutter pode aumentar suavemente para breakpoint maiores.
• As colunas são 4/6/8/12 como «conjunto principal».

4) Modularidade e densidade

O módulo é um bloco de conteúdo que ocupa 1 N colunas e múltiplas alturas baseline.

• Comfort (dashboard, leitura): maiores fontes, recuos 16-24.
• Compact (tabelas, estilo profissional): fontes + 0/- 1 px, recuos verticais - 4/- 8, altura de linha fixa (múltiplo 8).

Os componentes devem ter o mínimo de densidade predial.

5) Tipografia e malha baseline

Selecione o line-height básico (por exemplo, 24 px) e sincronize as alturas dos itens (botões 40/48/56 px múltiplos baseline).
Os cabeçalhos fixam os ritmos verticais - recuar sobre/sob o múltiplo 8.
Alinhem os ícones à largura do texto.

6) Modelos de disposição

6. 1 Cartões (cards)

Grade: mosaico (fix. largura do cartão) ou invertebrado (cartão = N colunas).
Altura mínima de conteúdo para evitar «salto» no download; skeleton dentro do cartão.
Padding interno: 16/20/24 dependendo do breakpoint.

6. 2 Tabelas

Contêiner para toda a largura; congelamos a primeira coluna/chapéu com o screll horizontal.
Células - baseline múltiplas; as colunas de números são alinhadas em descargas/decimais.
Em XS - «linhas de cartas» (stacked layout) em vez de scroll horizontal, se as colunas forem demais.

6. 3 Formulários

Invertebrados em XS/SM, dois ou três invertebrados em MD + (considerando a lógica das tabas/secções).
O campo + selo + texto help é colocado em um módulo comum (as alturas são múltiplas de 8).

6. 4 Dashboards

Grid com faixas fixas e nuvens (áreas) para estabilidade.
Os widgets têm largura mínima e máxima nas colunas; altitude - múltiplos baseline.
Na ressaiza, as colunas mudam, não os widgets são aleatórios.

7) Adaptabilidade, auto-layout e comportamento

Conteúdo à frente da grade: a grade se ajusta ao conteúdo em vez de quebrá-lo.

• Use constraits (left/right/center) e auto-layout para cartões/listas.
• Suporte as opções de componente para XS/SM/MD/LG (alteração dos paddings, ordem dos slots).

• O nível de secção é CSS Grid (áreas, colunas, linhas).
• Dentro dos componentes, Flex (eixos, equilíbrio de espaços).

8) CSS Grid/Flex - oficina

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) Recuos e tokens

Capture a escala em um sistema de design.

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

• As retiradas internas dos componentes são de 'space'.
• Os campos externos dos contêineres são de 'gutter '/' margin'.
• As alturas dos elementos são múltiplas de 8 (40/48/56).

10) Componentes modulares

• saber quantas colunas ele ocupa em cada breakpoint;
• ter dimensões mínimas/máximas;
• não dependam de pixels «mágicos» - apenas de tokens;
• mantenha a grade interna (título, conteúdo, futer) na baseline.

11) Imagens e projeções de mídia

Fixe o aspect-ratio (por exemplo, 16/9, 4/3, 1/1) para a antecipação e cartões.

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

No XS, use full-bleed (imagem nas bordas) apenas para promover, o resto do conteúdo segue o contêiner.
Texto na imagem - apenas em tons/overleys, contraste ≥ AA.

12) SE e localização

A direção gred é espelhada: 'dir =' e ': dir (1989)' - regeu para recuos/ícones.
Ordem das colunas e áreas «pegajosas» (frozen columns) nas tabelas - leve em conta o espelhamento.
Comprimento de linha e transposição podem alterar a altura dos módulos - coloque o estoque.

13) Especificidades iGaming

Áreas promocionais e banners: grid separado com grandes módulos; texto sempre na tinta, contraste AAA para notificações responsáveis (18 +, limites, riscos).
Líderes/classificações: tabelas com primeira coluna fixa e chapéu sticky, números tabulares (tabular-nums), altura de linha múltipla 8.
Dashboard jogadores/operações: widgets (sessões, depósitos, RTP, Net Deposits) ocupam 3-6 colunas no 12-grid; Reconstruir em cascata em MD/SM.
Cartões de torneio: grade de cartões 3 x N (LG), 2 x N (MD), 1 x N (SM/XS); O CTA está em posição permanente.

14) Disponibilidade e foco

Os anéis de foco não devem quebrar o ritmo: adicione outline-offset ou pseudoelêmico interno.
Tamanho mínimo do clique: 44 x 44 (mob.) / 32 x 32 (desctop).
Não codifique o significado apenas com a colocação; mantenha os rótulos de texto e os atributos de ária.

15) Desempenho

Reduza a profundidade dos grades: 1 grid principal da secção + flex no interior.
Evite sombras pesadas/máscaras em centenas de cartões; use estilos «planos» nas listas.
Carregamento preguiçoso da mídia; proporções fixas impedem o CLS.

16) Antipattern

«Grade a gosto» espalha a consistência em cada página →.
O Gutter muda aleatoriamente em seções.
Densidades incoerentes (em uma tela e «CD» e «conforto»).
Componentes que dependem de shirinas mágicas (sem colunas/tokens).
Tabelas com scroll horizontal no móbil sem disposição alternativa.
Texto na imagem sem tons ou controle de contraste.

17) QA-folha de cheque

Estrutura

• As colunas/contêineres/marginas correspondem a breakpoentes.
• Gutter está estável dentro da página.
• As alturas e os recuos são múltiplos 8.

Componentes

• Largura invertebrada definida (XS.. XL) e min/max.
• As malhas internas estão alinhadas com baseline.

Tabelas/formulários

• Chapéu sticky/primeira coluna; modo stacked em XS.
• Campos de formulário múltiplos baseline; selo/help texto não saltam.

A11y

• Os estilos de foco não quebram o ritmo; Zonas de click ≥ mínimas.

Performance

• Não há CLS por causa dos sinais de mídia; download preguiçoso está ativado.

18) Tokens e documentação em design

• os valores «container», «columns», «gutter», «space», baseline;
• exemplos de disposição (cartões/tabelas/formulários/dashboards);
• pré-densidade (Comfort/Compact) e seus efeitos sobre os componentes;
• código-snippets para CSS Grid/Flex e Figma-estilos/layout.

Resumo curto

A grade é um contrato entre design e desenvolvimento. Use breakpoints, contêineres, colunas e ritmo de 8-pt, toquenis e modelos de disposição, opções de densidade, adaptabilidade e disponibilidade. Então as páginas são escaladas de forma previsível, os componentes são reutilizados e o comando é mais rápido e estável.