Responsividade é fundamental para qualquer website que queira oferecer o mínimo de boa experiência para o usuário.

E por anos temos usados media query no CSS para fazer esse trabalho, e ela funciona muito bem para ajustar os componentes dependendo do tamanho da tela.

Porém, media query tem uma limitação; ela apenas se baseia no tamanho da tela do usuário.

E se quisessemos nos basear no tamanho disponível do elemento pai?

Esse problema que a container query resolve. Nos permitir tratar componentes diferentemente dependendo do seu espaço disponível.

Usando container query

Imagine a seguinda estrutura de HTML.

<div class="grid">
    <div class="card">
      // ...
    </div>
    <div class="card">
      // ...
    </div>
    <div class="card">
      // ...
    </div>
</div>

Para utilizarmos container query nos elementos filhos de .grid, precisamos adicionar a propriedade container-type: inline-size nele.

.grid {
 container-type: inline-size;
}

Além inline-size, também é possível usar size e normal.

Agora sim podemos estilizar o componente .card dependendo do tamanho do seu pai .grid, para isso basta utilizarmos @container como uma @media query normal.

.card {
 width: 100%;
}

@container (min-width: 700px) {
  .card {
    width: 50%;
  }
}

@container (min-width: 1024px) {
  .card {
    width: 33%;
  }
}

Assim, o elemento .card terá width 100% por padrão, width 50% quando .grid tiver no mínimo 700px e width 33% se .grid tiver no minimo 1024px.

Nested container queries

Também é possível ter container queries aninhados e adicionar um nome para cada pra ser consultado.

<div class="content">
    <div class="grid">
        <p class="text">Text</p>
    </div>
</div>

.content {
    content-name: content;
    container-type: inline-size;
}

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

.text {
    font-size: 12px;
}

@container content (min-width: 320px) {
    .text {
        font-size: 14px;
    }
}

@container grid (min-width: 620px) {
    .text {
        font-size: 16px;
    }
}

O componente .text terá font-size 12px por padrão, font-size 14px quando .content tiver no mínimo 320px e font-size 16px quando .grid tiver no mínimo 620px.

Unidade de Container Query

Container query também oferece novas unidades de medidas de CSS, assim como px, %, vw, vh. Todos ele se baseam no espaço disponível em relação ao elemento pai.

• 1cqw - 1% da largura do query container.
• 1cqh - 1% da altura do query container
• 1cqi - 1% do tamanho inline do query container.
• 1cqb - 1% do tamanho block do query container.
• cqmin - O menor tamanho entre cqi e cqb.
• cqmax - O maior tamanho entre cqi e cqb.

Suporte

Container Query é suportado por boa parte dos navegadores modernos, então você já pode começar a utiliza-lo.