← Catálogolayout · stable

Grid responsivo

Grades, spans e lacunas para composição responsiva. A documentação abaixo separa composição, comportamento e adaptação visual de cada variante.

QUANDO USAR

Use Grid responsivo quando a interface precisar de grades, spans e lacunas para composição responsiva.

QUANDO NÃO USAR

Evite a família quando uma composição semântica mais simples comunicar a mesma ação com menos carga visual.

TECLADO

O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

RESPONSIVO

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

Ver prévias

WIDE · stable

2 colunas

2 colunas, preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-grid sc-cols-2 sc-gap-4">
                <div class="sc-card sc-card-outline">A</div>
                <div class="sc-card sc-card-outline">B</div>
              </div>

Classes, JavaScript e API

sc-gridsc-cols-2sc-gap-4sc-cardsc-card-outline

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin: CSS-first
Dependências: Nenhuma
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

WIDE · stable

3 colunas

3 colunas, preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-grid sc-cols-3 sc-gap-4">
                <div class="sc-card sc-card-outline">1</div>
                <div class="sc-card sc-card-outline">2</div>
                <div class="sc-card sc-card-outline">3</div>
              </div>

Classes, JavaScript e API

sc-gridsc-cols-3sc-gap-4sc-cardsc-card-outline

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin: CSS-first
Dependências: Nenhuma
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

WIDE · stable

Auto-fit

Auto-fit, preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-grid sc-grid-auto sc-gap-4">
                <div class="sc-card sc-card-outline">Auto</div>
                <div class="sc-card sc-card-outline">Auto</div>
                <div class="sc-card sc-card-outline">Auto</div>
                <div class="sc-card sc-card-outline">Auto</div>
              </div>

Classes, JavaScript e API

sc-gridsc-grid-autosc-gap-4sc-cardsc-card-outline

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin: CSS-first
Dependências: Nenhuma
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

WIDE · stable

Spans (dashboard)

Spans (dashboard), preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-grid sc-cols-6 sc-gap-4">
                <div class="sc-card sc-card-outline sc-col-span-4">Main (span 4)</div>
                <div class="sc-card sc-card-outline sc-col-span-2">Side (span 2)</div>
                <div class="sc-card sc-card-outline sc-col-span-2">KPI</div>
                <div class="sc-card sc-card-outline sc-col-span-2">KPI</div>
                <div class="sc-card sc-card-outline sc-col-span-2">KPI</div>
              </div>

Classes, JavaScript e API

sc-gridsc-cols-6sc-gap-4sc-cardsc-card-outlinesc-col-span-4sc-col-span-2

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin: CSS-first
Dependências: Nenhuma
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

WIDE · stable

Sidebar layout

Sidebar layout, preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-grid sc-cols-6 sc-gap-4">
                <div class="sc-card sc-card-outline sc-col-span-2">Sidebar</div>
                <div class="sc-card sc-card-outline sc-col-span-4">Conteúdo</div>
              </div>

Classes, JavaScript e API

sc-gridsc-cols-6sc-gap-4sc-cardsc-card-outlinesc-col-span-2sc-col-span-4

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin: CSS-first
Dependências: Nenhuma
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

WIDE · stable

Cards + hover (opt-in)

Cards + hover (opt-in), preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-grid sc-cols-3 sc-gap-4">
                <div class="sc-card sc-card-hover sc-card-outline">
                  <span class="sc-badge">UX</span>
                  <h4 style="margin: 12px 0 8px;">Card curto</h4>
                  <p class="doc-muted" style="margin:0;">Grid pensado para cards (não vira banner).</p>
                </div>
                <div class="sc-card sc-card-hover sc-card-outline">
                  <span class="sc-badge sc-badge-success">UI</span>
                  <h4 style="margin: 12px 0 8px;">Hierarquia</h4>
                  <p class="doc-muted" style="margin:0;">Badge + título + texto.</p>
                </div>
                <div class="sc-card sc-card-hover sc-card-outline">
                  <span class="sc-badge sc-badge-secondary">CTA</span>
                  <h4 style="margin: 12px 0 8px;">Ações</h4>
                  <div style="display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px;">
                    <button class="sc-btn sc-btn-primary sc-btn-sm" type="button">Abrir</button>
                    <button class="sc-btn sc-btn-outline sc-btn-sm" type="button">Detalhes</button>
                  </div>
                </div>
              </div>

Classes, JavaScript e API

sc-gridsc-cols-3sc-gap-4sc-cardsc-card-hoversc-card-outlinesc-badgesc-badge-successsc-badge-secondarysc-btnsc-btn-primarysc-btn-smsc-btn-outline

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin: CSS-first
Dependências: Nenhuma
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

WIDE · stable

Pricing (3 planos)

Pricing (3 planos), preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-grid sc-cols-3 sc-gap-4">
                <div class="sc-card sc-card-outline">
                  <span class="sc-badge">Free</span>
                  <h3 style="margin: 12px 0 8px;">R$ 0</h3>
                  <p class="doc-muted" style="margin:0;">Para testar e validar.</p>
                  <div class="doc-divider" style="margin: 12px 0;"></div>
                  <ul style="margin:0; padding-left: 18px;">
                    <li>1 projeto</li><li>Comunidade</li><li>Templates básicos</li>
                  </ul>
                  <div style="margin-top: 14px;">
                    <button class="sc-btn sc-btn-outline" type="button" style="width:100%;">Começar</button>
                  </div>
                </div>
                <div class="sc-card sc-card-outline sc-card-accent sc-card-hover">
                  <span class="sc-badge sc-badge-success">Pro</span>
                  <h3 style="margin: 12px 0 8px;">R$ 49</h3>
                  <p class="doc-muted" style="margin:0;">Melhor custo-benefício.</p>
                  <div class="doc-divider" style="margin: 12px 0;"></div>
                  <ul style="margin:0; padding-left: 18px;">
                    <li>Projetos ilimitados</li><li>Componentes premium</li><li>Suporte</li>
                  </ul>
                  <div style="margin-top: 14px;">
                    <button class="sc-btn sc-btn-primary" type="button" style="width:100%;">Assinar</button>
                  </div>
                </div>
                <div class="sc-card sc-card-outline">
                  <span class="sc-badge sc-badge-secondary">Business</span>
                  <h3 style="margin: 12px 0 8px;">R$ 129</h3>
                  <p class="doc-muted" style="margin:0;">Para times.</p>
                  <div class="doc-divider" style="margin: 12px 0;"></div>
                  <ul style="margin:0; padding-left: 18px;">
                    <li>Times</li><li>SSO</li><li>SLA</li>
                  </ul>
                  <div style="margin-top: 14px;">
                    <button class="sc-btn sc-btn-glass" type="button" style="width:100%;">Falar com vendas</button>
                  </div>
                </div>
              </div>

Classes, JavaScript e API

sc-gridsc-cols-3sc-gap-4sc-cardsc-card-outlinesc-badgesc-btnsc-btn-outlinesc-card-accentsc-card-hoversc-badge-successsc-btn-primarysc-badge-secondarysc-btn-glass

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin: CSS-first
Dependências: Nenhuma
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

WIDE · stable

Dashboard (cards + tabela)

Dashboard (cards + tabela), preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-grid sc-cols-6 sc-gap-4">
                <div class="sc-card sc-card-outline sc-col-span-2">
                  <span class="sc-badge sc-badge-secondary">Receita</span>
                  <h3 style="margin: 12px 0 0;">R$ 12.450</h3>
                  <p class="doc-muted" style="margin: 8px 0 0;">+18% vs semana</p>
                </div>
                <div class="sc-card sc-card-outline sc-col-span-2">
                  <span class="sc-badge sc-badge-secondary">Pedidos</span>
                  <h3 style="margin: 12px 0 0;">312</h3>
                  <p class="doc-muted" style="margin: 8px 0 0;">Taxa 3.2%</p>
                </div>
                <div class="sc-card sc-card-outline sc-col-span-2">
                  <span class="sc-badge sc-badge-secondary">Tickets</span>
                  <h3 style="margin: 12px 0 0;">9</h3>
                  <p class="doc-muted" style="margin: 8px 0 0;">2 críticos</p>
                </div>
                <div class="sc-card sc-card-outline sc-col-span-4">
                  <div style="display:flex; align-items:center; justify-content:space-between; gap:10px;">
                    <strong>Atividade</strong>
                    <button class="sc-btn sc-btn-outline sc-btn-sm" type="button">Ver tudo</button>
                  </div>
                  <div class="doc-divider" style="margin: 12px 0;"></div>
                  <div class="sc-table-container">
                    <table class="sc-table sc-table-compact">
                      <thead><tr><th>Evento</th><th class="is-muted">Hora</th><th>Status</th></tr></thead>
                      <tbody>
                        <tr><td>Login</td><td class="is-muted">09:12</td><td><span class="sc-badge sc-badge-success">OK</span></td></tr>
                        <tr><td>Upload</td><td class="is-muted">09:20</td><td><span class="sc-badge sc-badge-warning">Pendente</span></td></tr>
                      </tbody>
                    </table>
                  </div>
                </div>
                <div class="sc-card sc-card-outline sc-col-span-2">
                  <strong>Atalhos</strong>
                  <div class="doc-divider" style="margin: 12px 0;"></div>
                  <div style="display:grid; gap:10px;">
                    <button class="sc-btn sc-btn-primary" type="button">Novo</button>
                    <button class="sc-btn sc-btn-glass" type="button">Importar</button>
                    <button class="sc-btn sc-btn-outline" type="button">Config</button>
                  </div>
                </div>
              </div>

Classes, JavaScript e API

sc-gridsc-cols-6sc-gap-4sc-cardsc-card-outlinesc-col-span-2sc-badgesc-badge-secondarysc-col-span-4sc-btnsc-btn-outlinesc-btn-smsc-table-containersc-tablesc-table-compactsc-badge-successsc-badge-warningsc-btn-primarysc-btn-glass

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin: CSS-first
Dependências: Nenhuma
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

WIDE · stable

Form layout (2 colunas + full)

Form layout (2 colunas + full), preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-card sc-card-outline">
                <div class="sc-grid sc-cols-2 sc-gap-4">
                  <div class="sc-field">
                    <label class="sc-label" for="gName">Nome</label>
                    <input id="gName" class="sc-input" placeholder="Seu nome">
                  </div>
                  <div class="sc-field">
                    <label class="sc-label" for="gMail">E-mail</label>
                    <input id="gMail" class="sc-input" placeholder="voce@email.com">
                  </div>
                  <div class="sc-field" style="grid-column: 1 / -1;">
                    <label class="sc-label" for="gMsg">Mensagem</label>
                    <textarea id="gMsg" class="sc-textarea" placeholder="Digite⬦"></textarea>
                  </div>
                  <div style="grid-column: 1 / -1; display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap;">
                    <button class="sc-btn sc-btn-outline" type="button">Cancelar</button>
                    <button class="sc-btn sc-btn-primary" type="button">Enviar</button>
                  </div>
                </div>
              </div>

Classes, JavaScript e API

sc-cardsc-card-outlinesc-gridsc-cols-2sc-gap-4sc-fieldsc-labelsc-inputsc-textareasc-btnsc-btn-outlinesc-btn-primary

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin: CSS-first
Dependências: Nenhuma
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

WIDE · stable

Lista de cards (UI feed)

Lista de cards (UI feed), preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-grid sc-cols-2 sc-gap-4">
                <div class="sc-card sc-card-outline sc-col-span-2">
                  <div style="display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap;">
                    <div style="display:grid; gap:6px;">
                      <strong style="line-height:1.2;">Atualização do produto</strong>
                      <span class="doc-muted" style="margin:0;">Notas da versão • 2 min</span>
                    </div>
                    <span class="sc-badge sc-badge-success">Novo</span>
                  </div>
                  <p class="doc-muted" style="margin: 12px 0 0;">Um layout de feed comum em apps: header + texto curto + ações.</p>
                  <div style="display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px;">
                    <button class="sc-btn sc-btn-primary sc-btn-sm" type="button">Ler</button>
                    <button class="sc-btn sc-btn-outline sc-btn-sm" type="button">Salvar</button>
                  </div>
                </div>
                <div class="sc-card sc-card-outline">
                  <strong>Card A</strong>
                  <p class="doc-muted" style="margin: 10px 0 0;">Conteúdo compacto.</p>
                </div>
                <div class="sc-card sc-card-outline">
                  <strong>Card B</strong>
                  <p class="doc-muted" style="margin: 10px 0 0;">Conteúdo compacto.</p>
                </div>
              </div>

Classes, JavaScript e API

sc-gridsc-cols-2sc-gap-4sc-cardsc-card-outlinesc-col-span-2sc-badgesc-badge-successsc-btnsc-btn-primarysc-btn-smsc-btn-outline

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin: CSS-first
Dependências: Nenhuma
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

Grid responsivo

Componentes relacionados