Container Queries: Condições CSS baseadas no espaço do componente

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