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:
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 ...
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