CSS Container Query

Gratuito DevTools

CSS Container Query Generator

Gere regras @container para responsividade baseada no tamanho do conteiner (nao do viewport). Referencia rapida de container-type e tabela de tipos incluidos. Suportado em todos os navegadores modernos desde 2023.

2.9k usuarios Atualizado em Mar 2026 4.8/5

Avalie esta ferramenta:

4.8 (412 votos) Obrigado!

CSS Container Query Generator

Configurar Container Query

Nome do Conteiner (opcional)

Condicao

Valor (px)

Seletor CSS interno

Propriedades CSS (uma por linha)

CSS Gerado

/* Configure e clique em Gerar */

Referencia Rapida

HTMLstyle="container-type: inline-size;"

CSS.container { container-type: inline-size; }

Nome.sidebar { container: sidebar / inline-size; }

Query@container (min-width: 600px) { ... }

Named@container sidebar (min-width: 300px) { ... }

.parent {
  container-type: inline-size;
  /* ou: container: name / inline-size; */
}

@container (min-width: 500px) {
  .child {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

Tipos de container-type

Valor	Descricao
`inline-size`	Consulta largura do conteiner (mais comum)
`size`	Consulta largura E altura
`normal`	Apenas queries de estilo (style queries)

Dica: Container Queries sao diferentes das Media Queries. Media Queries respondem ao tamanho do viewport, enquanto Container Queries respondem ao tamanho do elemento pai. Isso e ideal para componentes reutilizaveis.

Como Usar

Gere CSS de container query em segundos.

Configure o conteiner

Preencha o nome (opcional), condicao, valor em px e seletor CSS interno.

Adicione as propriedades

Insira as propriedades CSS que devem ser aplicadas quando a condicao for satisfeita, uma por linha.

Clique em Gerar CSS

O CSS completo e gerado automaticamente, incluindo a declaracao do conteiner pai.

Copie e use

Clique em "Copiar" para copiar o CSS gerado e cole direto no seu projeto.

Sobre CSS Container Queries

Container Queries permitem que um componente reaja ao tamanho do seu conteiner pai, em vez do viewport. Isso resolve o problema classico de componentes reutilizaveis que precisam se adaptar dependendo de onde estao na pagina.

Para usar, o elemento pai precisa ter container-type: inline-size (ou size)
Conteiners com nome permitem queries mais especificas com container: nome / inline-size
Suportado no Chrome 105+, Firefox 110+, Safari 16+ (todos os navegadores modernos)
Pode ser combinado com Media Queries para layouts ainda mais flexiveis

Artigo

CSS Container Queries: O Futuro da Responsividade Baseada em Componentes

Por Equipe Chipak • Atualizado em Mar 2026 • 7 min de leitura

Neste artigo

O problema que Container Queries resolve
Sintaxe e como funciona
Tipos de container-type
Conteiners com nome
Casos de uso praticos
Perguntas frequentes

1. O Problema que Container Queries Resolve

Durante anos, a unica forma de criar layouts responsivos em CSS eram as Media Queries, que respondem ao tamanho do viewport. O problema: um componente como um card pode aparecer em uma grade de 3 colunas (onde fica pequeno) ou em destaque em largura total. Com Media Queries, e impossivel fazer o card se adaptar ao espaco que ocupa — ele so pode responder ao viewport inteiro.

Container Queries resolvem isso ao permitir que o card responda ao tamanho do seu elemento pai, tornando cada componente verdadeiramente autonomo e reutilizavel.

2. Sintaxe e Como Funciona

Para usar Container Queries, voce precisa de dois passos: declarar o conteiner pai e depois escrever a query. O conteiner pai precisa ter container-type definido:

.wrapper { container-type: inline-size; } — habilita queries de largura
@container (min-width: 500px) { .child { ... } } — a query propriamente dita

3. Tipos de container-type

inline-size e o mais usado — habilita apenas consultas de largura, que e o caso mais comum. size habilita tanto largura quanto altura, mas tem impacto maior na performance. normal e para style queries, um recurso ainda mais novo que permite consultar valores de propriedades CSS customizadas.

4. Conteiners com Nome

Quando voce tem conteiners aninhados, pode precisar especificar qual conteiner a query deve consultar. Isso e feito nomeando o conteiner: .sidebar { container: sidebar / inline-size; }. Depois, a query referencia o nome: @container sidebar (min-width: 300px) { ... }.

"Container Queries finalmente permitem criar componentes verdadeiramente autonomos — um sonho da comunidade CSS que levou mais de uma decada para se tornar realidade."

5. Casos de Uso Praticos

Container Queries brilham em varios cenarios de UI moderno:

Cards de produto: exibir layout horizontal quando o card e largo, vertical quando estreito
Sidebar: mostrar apenas icones quando a sidebar esta colapsada
Componentes de formulario: adaptar o layout de campos dependendo do espaco disponivel
Artigos em grid: ajustar tipografia e espacamento conforme a coluna

6. Perguntas Frequentes

Container Queries substituem Media Queries?

Nao — eles sao complementares. Media Queries continuam sendo o lugar certo para mudancas de layout de nivel de pagina (como mudar de 1 para 3 colunas). Container Queries sao para adaptar componentes ao espaco que ocupam dentro desses layouts.

Ha impacto de performance?

Container Queries com inline-size tem impacto minimo de performance. Use size com cautela, pois exige que o browser rastreie tanto largura quanto altura do conteiner, o que pode impactar o reflow em layouts complexos.