HTML & CSS · Capítulo 8
CSS moderno: custom properties e container queries
Componentes adaptativos sem depender apenas do viewport.
O que precisas de perceber
Custom properties criam tokens; container queries deixam um componente reagir ao espaço que recebe. Combina Grid, Flexbox, min(), max() e clamp() para layouts fluidos.
EXEMPLO
Vê o código
.card-wrap{container-type:inline-size}
@container (min-width:500px){.card{grid-template-columns:1fr 2fr}}As minhas notas
Escreve apontamentos deste capítulo. Ficam apenas neste dispositivo.
Guardado localmente.Exercício
Cria um card que muda internamente quando o seu contentor passa 500px.