CSS Container Queries: O Futuro do Layout Responsivo Já Chegou

O Problema com Media Queries

Media queries respondem ao viewport (tamanho da janela). Mas no design moderno de componentes, o que importa é o tamanho do container do componente.

Imagine um card de produto. Ele deve mostrar a imagem ao lado do texto quando há espaço suficiente, e empilhados quando não há. Mas esse "espaço suficiente" depende de onde o card está na página: em uma sidebar de 300px ou em um grid de 3 colunas em uma tela de 1400px.

/* ❌ Media query: responde ao VIEWPORT */
@media (min-width: 768px) {
  .product-card { display: flex; }
}
/* Problema: e se o card estiver em uma sidebar estreita em telas largas? */

A Solução: Container Queries

/* ✅ Container query: responde ao CONTAINER */
.card-wrapper {
  container-type: inline-size; /* define este elemento como container */
  container-name: card;        /* nome opcional */
}

/* O card muda layout quando o CONTAINER tem >= 400px */
@container card (min-width: 400px) {
  .product-card {
    display: flex;
    gap: 1rem;
  }
  .product-card__image {
    width: 40%;
    flex-shrink: 0;
  }
}

Usando em Tailwind CSS 4

O Tailwind CSS 4 tem suporte nativo a container queries:

<div class="@container">
  <div class="flex flex-col @md:flex-row gap-4">
    <img class="w-full @md:w-40" src="..." alt="..." />
    <div>
      <h3 class="text-base @md:text-xl">Título do Produto</h3>
      <p>Descrição...</p>
    </div>
  </div>
</div>

O @md: no Tailwind 4 se refere ao container pai, não ao viewport. Isso é revolucionário para componentes reutilizáveis.

Container Size Queries

Além de inline-size, você pode usar size para responder tanto à largura quanto à altura:

.hero-wrapper {
  container-type: size;
}

@container (min-width: 600px) and (min-height: 400px) {
  .hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

Suporte nos Navegadores

Desde Fevereiro de 2023, container queries têm suporte em todos os browsers modernos:

• Chrome 105+ ✅
• Firefox 110+ ✅
• Safari 16+ ✅
• Edge 105+ ✅

Coverage global: ~93%. Pode usar em produção sem polyfill.

Quando Usar Container vs Media Queries

Use Media Queries para layout global (header, sidebar, grid de colunas), e Container Queries para o layout interno de componentes individuais. Os dois se complementam.

Container Queries não substituem Media Queries; eles são ferramentas diferentes para problemas diferentes.