Media queries respondem ao tamanho da tela. Mas um card não liga pra tela — ele liga pro espaço que tem no container. É aí que entram as Container Queries.

1. Declare o container

.grid-item {
  container-type: inline-size;
  container-name: card;
}

2. Consulte o tamanho do container

@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 160px 1fr;
  }
}

Agora o mesmo componente vira layout de 2 colunas quando tem espaço — esteja ele na sidebar estreita ou no conteúdo largo.

3. Unidades de container

Além do @container, você ganha unidades relativas ao container: cqw, cqh, cqi, cqb.

.card h3 { font-size: clamp(1rem, 5cqi, 1.5rem); }

Por que isso muda o jogo

Componentes viram verdadeiramente portáteis: o mesmo card funciona em qualquer slot do layout sem você reescrever breakpoints por página. Suporte universal nos browsers modernos desde 2023.