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.