Container Queries no CSS: Como Criar Layouts Responsivos Baseados em Containers
Aprenda a usar Container Queries no CSS e crie layouts responsivos com base no tamanho do container HTML. Veja exemplos práticos e código comentado.
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber o(s) arquivo(s) utilizados na aula, preencha seu e-mail:
Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.
O que você vai aprender:
Introdução ao Design Responsivo com Container Queries
O desenvolvimento web tem evoluído significativamente, especialmente no que diz respeito à criação de designs responsivos e flexíveis para diferentes tamanhos de tela e dispositivos.
Durante muitos anos, as media queries foram a principal ferramenta do CSS para adaptar layouts com base no tamanho da janela de visualização (viewport). No entanto, essa abordagem apresenta algumas limitações, principalmente em layouts mais complexos, compostos por diversos componentes reutilizáveis.
Para resolver esse tipo de problema, surgiu uma nova e poderosa funcionalidade chamada Container Queries, que permite controlar o layout responsivo com base no tamanho do container HTML em que um elemento está inserido e não apenas no tamanho da tela.
Essa inovação amplia o poder do CSS responsivo, permitindo que o estilo de um componente se ajuste de forma autônoma ao espaço disponível no contêiner que o envolve, tornando o comportamento visual muito mais previsível e modular.
Material da Aula – Página de Exemplo
No material disponível para download, você encontrará os arquivos index.html e style.css.
Esses arquivos estruturam a página da web que utilizaremos como exemplo para explorar o funcionamento das container queries no CSS na prática.
Essa é uma página bem simples, contendo:
- Um título principal (<h1>);
- Um parágrafo introdutório;
- Dois blocos de conteúdo: o bloco principal e o bloco de colunas (localizado à direita da tela).
Dentro de ambos os blocos, temos caixas organizadas, cada uma contendo uma imagem e um parágrafo. Todas essas caixas utilizam a mesma classe CSS chamada .caixa.
Limitações das Media Queries Tradicionais
Antes de entrar na implementação das container queries, é importante entender o porquê de sua existência.
Criar interfaces responsivas é essencial no desenvolvimento front-end moderno e, até recentemente, as media queries eram a principal ferramenta para isso.
As media queries monitoram o tamanho da tela do usuário (viewport) e, com base nisso, aplicam regras CSS que ajustam o layout da página para diferentes dispositivos, como desktops, tablets e celulares.
Embora eficazes em muitos contextos, as media queries podem se tornar limitantes em layouts modulares ou reutilizáveis, como neste exemplo em que diversos elementos compartilham a mesma classe .caixa.
Quando aplicamos uma regra CSS dentro de uma media query à classe .caixa, ela será replicada para todos os elementos que a utilizam, independentemente do tamanho específico de cada container HTML. Isso pode gerar problemas de inconsistência no layout.
Por exemplo: a caixa no bloco principal deve ocupar mais espaço e ter um comportamento visual diferente das caixas no bloco de colunas. No entanto, como todas usam a mesma classe, as media queries não conseguem fazer essa distinção.
O ideal, nesse caso, seria adaptar o comportamento de cada .caixa com base no tamanho do container onde ela está inserida, e não com base no tamanho total da tela.
É justamente para isso que servem as container queries, a nova funcionalidade do CSS que permite criar layouts responsivos orientados ao contexto do contêiner.
Dica: Se quiser revisar os conceitos de media queries e técnicas clássicas de responsividade no CSS, confira nossa aula: Responsividade no CSS: Criando Layouts para Diferentes Dispositivos
O Que São Container Queries e Container HTML?
As Container Queries representam uma abordagem moderna e eficiente para criar layouts responsivos com base no tamanho do container HTML, e não apenas no tamanho da tela do usuário.
Diferente das media queries, que reagem à largura da viewport, as container queries permitem que o estilo de um componente seja definido de acordo com o espaço disponível dentro de seu contêiner.
Isso é especialmente útil em layouts reutilizáveis e modulares, onde diferentes componentes compartilham classes mas ocupam espaços distintos na página.
Essa funcionalidade proporciona muito mais controle e flexibilidade no desenvolvimento de CSS responsivo, garantindo que cada elemento se ajuste ao seu próprio contexto de forma independente, independentemente do dispositivo ou resolução utilizados
HTML e CSS ImpressionadorVocê vai aprender não só os fundamentos básicos, intermediários e avançados de HTML e CSS, como também vai aprender a integrar com os principais frameworks. Além disso, você vai sair do curso com um portfólio de projetos completo!
Começar agora
Como utilizar Container Queries no CSS
Para usar uma container query, é necessário, antes de tudo, declarar um elemento como contêiner. Isso é feito por meio da propriedade container-type no CSS. Por exemplo:
.principal, .coluna {
container-type: inline-size; /* Define que o container é referente à largura */
}Essa declaração informa ao navegador que o layout dos elementos filhos pode ser influenciado pela largura do contêiner (inline-size). Após isso, você pode definir regras condicionais com base nessa dimensão:
@container (max-width: 550px) {
.caixa {
flex-direction: column;
}
}Esse código ajusta o estilo da .caixa apenas quando o container tiver 550px ou menos de largura, sem afetar outros elementos que compartilhem essa mesma classe em containers maiores.
Verificando suporte nos navegadores
Como toda nova funcionalidade do CSS, é importante verificar o suporte dos navegadores antes de usar o container queries em projetos de produção.
O site Can I Use é a melhor fonte para isso. De acordo com os dados mais recentes, mais de 90% dos navegadores modernos já suportam Container Queries, incluindo Google Chrome, Edge, Safari e Firefox. Isso torna essa técnica viável, segura e recomendada para novos projetos de design responsivo.
Analisando o Layout com Ferramentas do Desenvolvedor
Antes de aplicar as container queries à nossa página, precisamos identificar em que ponto o layout dos elementos começa a quebrar dentro de seus respectivos contêineres.
Para isso, utilizaremos as Ferramentas do Desenvolvedor do navegador. Elas permitem inspecionar elementos da página, verificar suas dimensões e testar o comportamento responsivo diretamente na tela.
Acessando a ferramenta:
No Google Chrome, siga este caminho:
- Clique nos três pontos no canto superior direito do navegador.
- Vá em Mais ferramentas > Ferramentas do desenvolvedor.
Ou utilize o atalho Ctrl + Shift + I.
Dentro da ferramenta, ative a opção Toggle device toolbar (ícone de celular e tablet no canto superior esquerdo da janela). Com ela, é possível simular diferentes tamanhos de tela e observar como o layout se comporta.
Identificando o problema
Ao reduzir a largura da tela, perceba que abaixo de 1430px, as caixas do bloco de colunas começam a apresentar problemas: o texto e a imagem ficam comprimidos, tornando a leitura difícil.
No entanto, a caixa do bloco principal ainda tem bastante espaço e não exige alterações no layout. Isso confirma a limitação das media queries: se tentássemos resolver isso com base apenas na largura da tela, afetaríamos elementos que não precisam de ajustes.
Com container queries, conseguimos resolver esse problema de forma contextual: cada elemento será ajustado conforme o espaço real disponível dentro do seu container HTML, sem interferir nos demais.
Verificando as dimensões do container
Para definir um ponto de quebra adequado, vamos inspecionar o container da coluna lateral com as Ferramentas do Desenvolvedor. Use o seletor de elementos (ícone de cursor no canto superior esquerdo) e clique sobre a coluna.
Observe que o layout começa a quebrar a partir de 550px de largura. Esse será o nosso breakpoint específico.
Portanto, a regra de estilo dos nossos elementos deve ser aplicada quando o contêiner em que eles estão inseridos tiver 550px ou menos.
Aplicando Container Queries no CSS
Agora que já identificamos quando o layout deve mudar, vamos aplicar isso no CSS.
1. Declarando o container
Primeiro, definimos quais elementos serão containers utilizando a propriedade container-type com o valor inline-size (que indica que a largura do container será monitorada):
.principal {
display: flex;
width: 60%;
container-type: inline-size;
}
.coluna {
display: flex;
flex-direction: column;
gap: 10px;
width: 40%;
container-type: inline-size;
}Aplicamos essa propriedade aos seletores dos elementos com as classes .principal e .coluna.
Dica técnica: É obrigatório que o container tenha display configurado (flex, grid etc.) para que container-type funcione corretamente.
2. Criando a container query
Com os containers definidos, aplicamos a container query com base no tamanho deles. Neste caso, queremos mudar a orientação da .caixa para coluna quando o container tiver 550px ou menos
@container (max-width: 550px) {
.caixa {
flex-direction: column;
}
}Essa regra ajusta a exibição somente dentro do container afetado, sem interferir em outros elementos .caixa fora desse escopo.
Visualizando o Resultado
Após aplicar essa container query:
- As caixas do bloco de colunas passam a ser exibidas em coluna ao atingir 550px ou menos de largura.
- A caixa do bloco principal permanece inalterada, até que seu container também atinja esse limite.
Isso garante um layout muito mais preciso e adaptável, mesmo quando vários elementos compartilham a mesma classe .caixa.
Quando Usar Container Queries
- Quando múltiplos elementos compartilham a mesma classe, mas precisam se comportar de forma diferente dependendo do espaço disponível.
- Em layouts compostos por componentes reutilizáveis que podem ser exibidos em diferentes contextos e tamanhos.
- Quando o design precisa se adaptar não ao tamanho da tela, mas à largura do container onde o conteúdo está inserido.
- Em projetos que usam componentização com CSS moderno (como com Flexbox ou Grid).
- Para tornar o código CSS mais modular, previsível e com menor acoplamento ao layout global da página.
Vantagens de Usar Container Queries
- Maior controle sobre o layout em componentes reutilizáveis.
- Permite que diferentes elementos com a mesma classe se adaptem de forma independente.
- Reduz a complexidade de media queries globais em layouts dinâmicos.
- Aumenta a flexibilidade do design responsivo, permitindo adaptações locais ao invés de gerais.
- Compatível com mais de 90% dos navegadores modernos, segundo Can I Use.
- Melhora a escalabilidade do projeto, facilitando a manutenção e evolução do layout com o tempo.
Conclusão – Container Queries no CSS
As container queries marcam uma grande evolução no CSS responsivo. Elas possibilitam aplicar regras de estilo com base no tamanho real do container HTML, e não mais apenas na tela do dispositivo.
Nesta aula, você aprendeu:
- O que são container queries.
- Como aplicá-las na prática com @container.
- Como usar container-type: inline-size para ativar o comportamento responsivo.
- Como testar o layout com as Ferramentas do Desenvolvedor.
Esse novo recurso torna seus projetos mais flexíveis, reutilizáveis e preparados para layouts complexos. E, com a ampla compatibilidade entre navegadores modernos, é uma excelente opção para qualquer desenvolvedor frontend.
🎓 Quer se aprofundar mais em HTML, CSS e JavaScript? Confira a nossa Formação Completa Full Stack Impressionador, onde você aprenderá a criar sites modernos, responsivos e com foco no mercado de trabalho.
Hashtag Treinamentos
Para acessar publicações de JavaScript, clique aqui!
Posts mais recentes de HTML e CSS
- LESS CSS: Guia Completo do Pré-processador (2026)
LESS CSS é um pré-processador que adiciona variáveis, mixins, nesting e operações matemáticas ao CSS. Aprenda a configurar e usar com projeto prático. - Variáveis no CSS (CSS Variables): Como Usar de Forma Profissional
Você sabe o que são Variáveis no CSS (CSS Variables)? Aprenda como usar técnicas que vão transformar a forma como você escreve variáveis CSS. - Display CSS: Nova Sintaxe e Como Usar
Aprenda a usar a propriedade display CSS com a nova sintaxe de múltiplos valores. Veja exemplos práticos e descubra como combinar estilos em um único comando.
Posts mais recentes da Hashtag Treinamentos
- Planilha de Controle de Notas Fiscais no Excel [Grátis]
Baixe a planilha de controle de notas fiscais no Excel grátis: calcule ISS e retenções, veja o que está em aberto e gere a cobrança de cada nota de serviço. - Qual IA usar na empresa: ChatGPT, Claude ou Perplexity?
Qual IA usar na empresa: veja as diferenças entre ChatGPT, Claude e Perplexity e quando cada um rende mais em cada área da sua equipe. - Apostilas Gratuitas em PDF: Excel, Power BI, Python e IA
Baixe apostilas gratuitas em PDF de Excel, Power BI, Python, Claude e agentes de IA, com exercícios e gabarito. Escolha a sua e comece hoje.
