@Container | CSS

• @Container | CSS

---

🧠 O que é @container

➡️ @container permite que você aplique estilos baseados no tamanho do elemento pai, em vez do tamanho da tela inteira.

Antes, com @media, só dava pra fazer isso:

@media (min-width: 768px) {
  .card {
    flex-direction: row;
  }
}

Mas isso depende da largura da viewport (tela).

Com @container, você pode reagir ao tamanho do contêiner — por exemplo, um card que se reorganiza dentro de um grid pequeno.

---

🧩 1️⃣ Habilitando um container

Primeiro, você precisa marcar um elemento como “container” usando a propriedade container-type:

.article {
  container-type: inline-size;
  /* inline-size = largura */
}

Isso diz ao navegador:

“Ei, o tamanho desse elemento pode ser usado como referência para consultas (@container).”

---

🧱 2️⃣ Fazendo uma query dentro dele

Depois, você escreve a regra @container assim:

@container (min-width: 600px) {
  .card {
    flex-direction: row;
  }
}

🔹 Essa regra será aplicada somente quando o contêiner pai tiver pelo menos 600px de largura, não importa o tamanho da tela.

---

💻 3️⃣ Exemplo completo

<style>
  /* 1. Tornamos o container “responsivo” */
  .article {
    container-type: inline-size;
    display: grid;
    gap: 1rem;
  }

  .card {
    display: flex;
    flex-direction: column;
    background: #f3f4f6;
    padding: 1rem;
    border-radius: 8px;
  }

  /* 2. Mudamos o layout com base no tamanho do container */
  @container (min-width: 600px) {
    .card {
      flex-direction: row;
      align-items: center;
    }
  }
</style>

<div class="article">
  <div class="card">
    <img src="https://via.placeholder.com/100" alt="">
    <p>Texto do card</p>
  </div>
</div>

👉 Se você diminuir a largura do .article, verá que o layout muda — mesmo que a tela continue grande.

---

⚙️ 4️⃣ Tipos de container

Tipo	Declaração	O que faz
container-type: inline-size;	mais comum	Baseia as queries na largura do container
container-type: size;	largura + altura	Considera largura e altura
container-name: ...;	dá um nome	Permite criar queries nomeadas

Exemplo com nome:

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

@container sidebar (max-width: 400px) {
  .menu {
    display: none;
  }
}

---

🧠 5️⃣ Diferença entre @media e @container

Diferença	@media	@container
Base da medição	Tela (viewport)	Elemento pai
Uso típico	Layout geral (header, footer, etc.)	Componentes dentro de layouts flexíveis
Granularidade	Global	Local (componentes adaptativos)

---

💡 6️⃣ Suporte

@container é suportado nos principais navegadores modernos: ✅ Chrome, ✅ Edge, ✅ Firefox, ✅ Safari (desde 2023).

---

✅ Resumo

Conceito	Explicação
@container	Reage ao tamanho de um container pai, não da tela
container-type	Define qual medida o container usa
@container (min-width: …)	Aplica estilos quando o container atingir esse tamanho
Uso	Layouts modulares e responsivos por componente
Suporte	Navegadores modernos