Blog ComercialWeb - São Paulo - SP
E-mail: [email protected]
E-mail: [email protected]
Diferente de media queries, que reagem ao tamanho da tela, as container queries reagem ao tamanho do próprio container. Isso permite componentes verdadeiramente reutilizáveis e previsíveis.
.card-grid { display: grid; gap: 16px; }
.card { container-type: inline-size; container-name: card; padding: 16px; border: 1px solid #ccc; }
@container card (min-width: 420px) {
.card .media { float: left; width: 160px; margin-right: 16px; }
.card .content { overflow: hidden; }
}
container-type: inline-size no elemento raiz do componente.@container (min-width: ...) com nomes de container para clareza.
