CSS Container Queries

1. Definición del contenedor:
    

    

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

    

   • La propiedad container-type: inline-size; establece que el contenedor .container será un «contenedor de consulta» y que las consultas (@container) se basarán únicamente en la dimensión horizontal (ancho) del contenedor, ignorando su altura.
2. Consulta de contenedor:
    

    

   @container (min-width: 400px) { 
     .component { 
   /* Estilos aplicados cuando el ancho del contenedor es al menos 400px */ 
     } 
   }

    

   • Con @container, se especifican estilos para los elementos hijos (.component) cuando el ancho del contenedor .container es igual o mayor a 400px. Esto permite crear diseños adaptativos según el tamaño del contenedor padre en lugar de depender del tamaño de la pantalla.

Uso práctico

Este enfoque es útil para diseños más modulares y reutilizables, ya que los estilos dependen del tamaño del contenedor y no de la resolución global del dispositivo. Por ejemplo, puede ser usado para ajustar el diseño de componentes dentro de tarjetas, columnas o bloques dinámicos en interfaces responsivas.