Gerador de Container Query CSS
Opções de Container Query
Recipiente
Condição de consulta
Regra de destino
Estado
Inativo
Visualização ao vivo
Preview container
Bloco de conteúdo
Este cartão muda quando a regra de contêiner é aplicada.
Bloco lateral
Use a visualização para testar alterações de layout.
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.
Ferramentas relacionadas
Você também pode achar essas ferramentas úteis.
Gerador de Media Query CSS
Crie media queries CSS responsivas para breakpoints de largura, orientação, modo escuro, movimento reduzido e suporte a hover.
Utilitários Diversos
›
Gerador de grade CSS
Crie layouts de grade CSS com colunas, linhas, lacunas, alinhamento, visualização ao vivo e CSS pronto para cópia.
Utilitários Diversos
›
Gerador de Flexbox CSS
Crie layouts Flexbox com preview em tempo real, controles de alinhamento, quebra de linha, direção, gap e CSS pronto para copiar.
Utilitários Diversos
›
Gerador de padrão de fundo CSS
Crie padrões de fundo CSS com pontos, grades, listras, linhas diagonais e tabuleiros de xadrez.
Utilitários Diversos
›
Perguntas frequentes sobre o gerador de Container Query CSS
O que é uma container query CSS?
Uma container query aplica CSS com base no tamanho de um elemento contêiner, não da viewport do navegador.
Quando devo usar container queries em vez de media queries?
Use container queries para componentes reutilizáveis que precisam se adaptar dentro de diferentes layouts. Use media queries para mudanças no nível da página.
O que significa tipo de contêiner: tamanho inline?
Permite consultar o eixo inline, geralmente a largura do contêiner nos modos de escrita horizontal.
Eu preciso do nome do contêiner?
Não. Os nomes dos contêineres são opcionais, mas são úteis quando você deseja direcionar um contêiner nomeado específico.