DevMedia Magazine

Neste artigo vamos falar sobre o container queries, um recurso do CSS que permite personalizar a exibição de um mesmo trecho de código dependendo do espaço disponível no seu elemento pai.

Para entender a utilidade desse recurso, veja a página abaixo:

Exemplo de página com container queries
Figura 1. Exemplo de página com container queries

Na página acima os dois cards têm o mesmo HTML e o mesmo CSS. Na coluna da esquerda, onde há mais espaço disponível, o card exibe a imagem ao lado das informações. Na coluna da direita, com menos espaço, o card reorganiza as informações em coluna.

Ter o mesmo trecho de código com exibições diferentes em cada seção da página não é possível apenas com as media queries. Para isso seria necessário criar classes ou ids diferentes para cada caso, o que faz o código deixar de ser o mesmo.

O container queries resolve esse problema ...

Fim do trecho gratuito • continue abaixo
CONTEÚDO EXCLUSIVO

Desbloqueie toda a DevMedia

  • +2000 artigos e vídeos
  • +40 trilhas sobre Front-end, Back-end, IA e muito mais
  • +5000 exercícios práticos
  • Mentorias ao vivo individuais
30% OFF
A partir de
R$ 47,00 /mês
Assinar agora