Gerador de Container Query CSS
Opções de Container Query
Visualização ao vivo
Sobre Container Queries CSS
Container queries CSS permitem que os componentes respondam ao tamanho do contêiner pai em vez da viewport. Elas são úteis para cards, painéis, widgets, barras laterais e componentes reutilizáveis.
Este gerador cria a configuração do contêiner e a regra @container juntas, para que você possa copiar rapidamente um padrão de componente responsivo completo.
Como usar este gerador
- Escolha um tipo de contêiner, geralmente de tamanho embutido para layouts de componentes baseados em largura.
- Defina um nome de contêiner opcional se desejar consultas de contêiner nomeadas.
- Escolha uma condição de largura mínima, largura máxima, altura mínima ou altura máxima.
- Insira o seletor e a declaração CSS que devem ser aplicadas na consulta do contêiner.
- Copie o CSS gerado em sua folha de estilo.
Dicas
- Use consultas de contêiner quando um componente precisar se adaptar ao seu próprio espaço disponível.
- Use consultas de mídia quando o layout depender de toda a viewport.
- Os contêineres nomeados são úteis quando os componentes aninhados têm vários contêineres de consulta possíveis.
- Mantenha os seletores de componentes locais e previsíveis, como .card, .panel ou .product-card.
Verificações de container queries antes de publicar um componente
Container queries adaptam componentes ao espaço disponível, mas containment, unidades, aninhamento e fallbacks exigem testes explícitos.
Escolha o query container
Defina container-type no ancestral correto e use um nome estável se layouts aninhados puderem selecionar outro elemento.
Teste diferentes contextos
Coloque o componente em sidebars, grids, modais, cards e layouts completos para confirmar que responde ao container.
Revise os limites
Teste valores logo antes, no ponto e depois de cada breakpoint, evitando lacunas ou sobreposições entre condições.
Planeje compatibilidade
Confirme suporte a queries de tamanho, estilo e scroll e ofereça uma base utilizável sem recursos novos.
Ferramentas relacionadas
Você também pode achar essas ferramentas úteis.