Container queries en la práctica
TODO i18n: Traducción completa del cuerpo pendiente. Título y descripción ya están localizados; el cuerpo permanece en portugués por ahora.
Media queries olham para a viewport. Componentes reutilizáveis muitas vezes precisam olhar para o espaço que receberam — sidebar estreita, modal, card em grid.
Com container-type: inline-size no pai e @container no filho, o mesmo card pode empilhar no mobile do componente e alinhar em linha quando o container largar, mesmo que a janela do browser seja larga.
Comece por aqui
- Abra o playground Layout com container queries e redimensione o shell.
- Compare com media queries clássicas e cards responsivos.
- Guarde o snippet de container query no seu kit.
Na trilha, a lição Responsivo moderno amarra clamp, container queries e scroll-snap.