@container (Container Queries) în CSS

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

@container (min-width: 400px) {
  .card-produs {
    display: flex;
  }
}

Ce face @container (Container Queries)

În timp ce @media se raportează doar la fereastra totală a browserului (viewport), @container se raportează la lățimea cutiei părinte.

De ce este revoluționar? O componentă (de exemplu un card de știre) poate arăta pe verticală când este pusă într-o bară laterală îngustă (sidebar) și pe orizontală când este pusă în conținutul principal, chiar pe aceeași pagină și pe același ecran!

Valori uzuale

Valoare	Descriere
container-type: inline-size	Definește elementul ca reper de măsurare pe orizontală.
@container (min-width: ...)	Condiția de declanșare bazată pe lățimea containerului.
unități cqw / cqh	1% din lățimea / înălțimea containerului.

Exemple

Exemplul 1: Card care își schimbă aspectul în funcție de spațiul din părinte

Dacă spațiul are peste 450px, poza și textul stau cot la cot; dacă e mai îngust, stau stivuite.

.caseta-parinte {
  container-type: inline-size;
}

.card-articol {
  display: flex;
  flex-direction: column;
}

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

Efect vizual în browser

Componenta devine cu adevărat modulară: arată impecabil oriunde este mutată în site.

Greșeli frecvente

• Omiterea declarării proprietății container-type pe părinte; fără container-type: inline-size, regula @container nu are la ce reper să se raporteze.

Comenzi înrudite

• @media (Media Queries): Aplică blocuri de stiluri CSS condiționat, în funcție de lățimea ecranului sau setările de sistem ale utilizatorului.
• display: flex: Transformă elementul într-un container flexibil; toți copiii direcți devin elemente flex așezate automat în linie.