Em 2024 e 2025, a especificacao de CSS Container Queries atingiu suporte praticamente universal nos navegadores modernos (Chrome 105+, Firefox 110+, Safari 16+). Agora podemos perguntar ao container, nao apenas ao viewport.

Veja um exemplo simples:

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

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

O resultado: componentes responsivos de verdade, sem depender do tamanho global da tela. Excelente para grids internos de artigos e layouts modulares.

Recomendacao: comece a usar em novos componentes e substitua os media queries tradicionais quando fizerem sentido apenas para o componente.

Hashtags: #css #containerqueries #responsivo #frontend