Sistema de Grade Responsiva

O que Sistema de Grade Responsiva faz?

Propósito

A skill Sistema de Grade Responsiva fornece uma base estruturada para organizar conteúdo em uma página web. Usando um conjunto consistente de colunas, calhas e margens, este sistema garante alinhamento visual, mantém a hierarquia e simplifica a transição de designs entre diferentes tamanhos de tela (Mobile, Tablet, Desktop).

Casos de Uso

• Projetar o layout estrutural de um novo site ou aplicação.
• Construir um kit de UI ou biblioteca de componentes de sistema de design.
• Organizar conteúdo complexo como painéis de controle ou interfaces densas em dados.
• Garantir um ritmo vertical consistente e alinhamento horizontal em múltiplas páginas.

Quando NÃO Usar

• Designs Experimentais/Brutalistas: Quando o objetivo visual é quebrar intencionalmente as convenções padrão de layout para efeito artístico.
• Páginas Simples de Propósito Único: Quando o conteúdo é tão mínimo (por exemplo, um único formulário centralizado) que um sistema de grade completo adiciona sobrecarga desnecessária.
• Ambientes de Largura Fixa: Quando a saída é estritamente para um meio não responsivo (embora uma grade ainda seja útil para alinhamento).

Entradas

Para estabelecer um sistema de grade responsiva, você precisa:

1. Breakpoints de Dispositivo: As larguras de tela onde o layout muda (ex.: 600px, 900px, 1200px).
2. Contagens de Colunas: Número de faixas verticais para o conteúdo em cada breakpoint (padrão: 12 para desktop, 4 para mobile).
3. Largura da Calha: O espaço entre colunas (ex.: 16px, 24px).
4. Margens Externas: O padding nas bordas esquerda e direita da viewport (ex.: 20px no mobile, 5% ou largura máxima fixa no desktop).
5. Requisitos de Conteúdo: Uma lista de componentes e sua prioridade/tamanho relativo.

Saídas

1. Especificação da Grade: Uma definição de colunas, calhas e margens para cada breakpoint principal.
2. Mapa de Layout: Um guia visual ou descritivo mostrando como os componentes abrangem colunas em diferentes tamanhos.
3. Lógica de Implementação: Propriedades CSS (Grid ou Flexbox) para realizar o sistema.

Fluxo de Trabalho

1. Definir Breakpoints

Selecione as larguras de tela principais onde seu layout precisa se adaptar. Escala Comum:

• Mobile: 0 - 599px
• Tablet: 600px - 899px
• Desktop: 900px+ (com um contêiner de largura máxima em torno de 1200px-1440px)

2. Definir Parâmetros de Coluna e Calha

Determine a "lógica interna" da grade.

• Mobile: 4 colunas, calhas de 16px, margens de 16px.
• Tablet: 8 colunas, calhas de 24px, margens de 32px.
• Desktop: 12 colunas, calhas de 24px, margens automáticas (contêiner centralizado).

3. Estabelecer Comportamento do Contêiner

Decida se a grade é Fluida (escala como uma porcentagem da viewport), Fixa (permanece em uma largura específica até o próximo breakpoint) ou Adaptativa (uma mistura). Recomendação: Use uma grade fluida com uma max-width fixa, dimensionada com clamp() (ex.: max-width: clamp(320px, 90vw, 1440px)) para que o contêiner escale suavemente em vez de pular nos breakpoints.

4. Mapear Conteúdo na Grade

Atribua componentes para abranger contagens específicas de colunas usando CSS Grid (grid-template-columns: repeat(12, 1fr) com grid-column: span N), e não hacks de float ou inline-block. Exemplo: Uma barra lateral pode abranger 3 colunas no desktop (grade de 12 colunas), enquanto o conteúdo principal abrange 9. No mobile, ambos abrangeriam todas as 4 colunas (empilhando).

Para componentes aninhados dentro de uma célula da grade que precisam se alinhar às faixas da grade pai (ex.: cabeçalho/corpo/rodapé interno de um cartão alinhado com cartões irmãos), use subgrid (grid-template-columns: subgrid ou grid-template-rows: subgrid) em vez de redeclarar uma nova grade independente.

Onde o layout interno de um componente depende de seu próprio espaço disponível, em vez da viewport (ex.: um cartão que deve ser refluído de 1 para 2 colunas com base na largura de seu contêiner, não na tela), use uma container query (container-type: inline-size no wrapper, @container (min-width: …) no filho) em vez de uma media query.

5. Definir Empilhamento e Ordenação

Determine como os elementos se movem quando a tela diminui. Normalmente, os elementos à esquerda empilham sobre os elementos à direita. Use propriedades lógicas (margin-inline, padding-block) para calhas e margens da grade para que o sistema se adapte corretamente a layouts RTL sem substituições separadas.

Regras de Decisão

• A Regra das 12 Colunas: Use uma grade de 12 colunas para desktop porque é divisível por 2, 3, 4 e 6, oferecendo máxima flexibilidade.
• Consistência: Use a mesma largura de calha em um único breakpoint para manter o alinhamento.
• Mobile First: Sempre projete o layout de 4 colunas para mobile primeiro para garantir que o conteúdo principal seja priorizado.
• A "Zona de Segurança": Garanta que as margens externas sejam grandes o suficiente para evitar que o conteúdo toque as bordas da tela em dispositivos móveis.
• Viewport vs. Contêiner: Use media queries para mudanças de layout orientadas pela viewport no nível da página (ex.: a contagem geral de colunas). Use container queries quando um componente deve se adaptar ao seu próprio tamanho de caixa, independentemente da viewport (ex.: o mesmo componente de cartão sendo refluído de forma diferente em uma barra lateral vs. uma seção de largura total).

Restrições

• Acessibilidade: Garanta que, quando as colunas encolherem, o texto permaneça legível e os alvos de toque (botões) permaneçam grandes o suficiente — WCAG 2.2 (2.5.8) define um piso absoluto de 24x24px, com 44x44px preferido para ações primárias.
• Responsividade: Nenhum elemento deve ter uma largura de pixel fixa que exceda a largura da viewport móvel (evite rolagem horizontal).
• Hierarquia: Use a grade para reforçar a importância; elementos mais importantes devem normalmente abranger mais colunas ou aparecer mais alto na pilha.

Padrões Comuns de Falha

• Calhas Inconsistentes: Usar espaçamento diferente entre diferentes colunas, o que quebra a "linha" visual.
• Design Sem Calhas: Colocar conteúdo diretamente um contra o outro sem espaço de respiro (a menos que seja intencional para imagens).
• Complexidade Excessiva: Criar muitos breakpoints para ajustes menores, levando a CSS não sustentável.
• Ignorar o "Meio-Termo": Testar apenas em 320px e 1440px, mas ignorar como o layout se parece em 800px ou 1024px.

Critérios de Validação

• O conteúdo está perfeitamente alinhado às linhas verticais da grade.
• Nenhuma barra de rolagem horizontal aparece em qualquer largura de viewport de 320px a 2560px.
• A transição entre breakpoints parece lógica e o conteúdo permanece legível.
• Calhas e margens permanecem consistentes em toda a página.
• O sistema é implementado usando unidades relativas (%, fr, rem) em vez de pixels fixos para larguras de coluna.
• Container queries são usadas (em vez de media queries de viewport) para componentes cujo layout deve depender de seu próprio tamanho de caixa.
• Os alvos de toque atendem pelo menos ao mínimo de 24x24px da WCAG 2.2.