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

Neste artigo você vai conhecer o container queries, um recurso do CSS que define condições de exibição com base no espaço do elemento pai. Com ele, o mesmo HTML e CSS produz layouts diferentes por seção, sem classes ou seletores adicionais.

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:

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

[...] continue lendo...

Artigos relacionados