Layout

Grid

Sistema de colunas responsivo com gutters e breakpoints definidos.

StableLayoutv1.0

Overview

Demonstração real e interativa de Grid nas larguras desktop, tablet e mobile.

Grid

12 colunas · gutter 16px · max-width 1280px · breakpoints 640 / 768 / 1024 / 1280

Altere as propriedades e veja o componente atualizar em tempo real.

12 colunas · gutter 16px · max-width 1280px · breakpoints 640 / 768 / 1024 / 1280

Superfície

Densidade

Largura

Ajuste o contexto de renderização para validar o componente em diferentes superfícies e larguras.

Todos os estados exibidos simultaneamente para facilitar a comparação.

Grid

Default

Grid

Hover

Feedback imediato

Grid

Focus

Anel de foco visível

Grid

Disabled

opacity 60%

Critérios de escolha e boas práticas.

Quando o contexto exige sistema de colunas responsivo com gutters e breakpoints definidos.
Em telas da categoria Layout que precisam de consistência com o restante da plataforma.
Quando a interação precisa ser previsível e reutilizável entre produtos.

Aplique Grid conforme os tokens de espaçamento, cor e tipografia definidos no Design System.

Don't

Não crie variações locais de Grid com cores, tamanhos ou comportamentos fora dos tokens.

Requisitos obrigatórios para conformidade WCAG 2.1 AA.

Contraste mínimo de 4.5:1 entre texto e fundo (WCAG 2.1 AA).
Todos os elementos interativos são alcançáveis via Tab e acionáveis por Enter/Espaço.
Foco sempre visível com anel de 2px usando --color-focus e offset de 2px.
Área mínima de toque de 44x44px em dispositivos móveis.
Estados disabled recebem aria-disabled e são removidos da ordem de tabulação quando aplicável.

Valores de referência para implementação, sempre baseados em tokens.