Generador de Container Query CSS
Opciones de Container Query
Contenedor
Condición de consulta
regla objetivo
Estado
inactivo
Vista previa en vivo
Preview container
bloque de contenido
Esta tarjeta cambia cuando se aplica la regla del contenedor.
bloque lateral
Utilice la vista previa para probar los cambios de diseño.
Acerca de las Container Queries CSS
Las container queries CSS permiten que los componentes respondan al tamaño de su contenedor principal en lugar del viewport. Son útiles para tarjetas, paneles, widgets, sidebars y componentes reutilizables.
Este generador crea la configuración del contenedor y la regla @container juntas, para que pueda copiar rápidamente un patrón de componente responsivo completo.
Cómo utilizar este generador
- Elija un tipo de contenedor, generalmente de tamaño en línea para diseños de componentes basados en el ancho.
- Defina un nombre de contenedor opcional si necesita container queries con nombre.
- Elija una condición de ancho mínimo, ancho máximo, alto mínimo o alto máximo.
- Ingrese el selector y la declaración CSS que deben aplicarse dentro de la consulta del contenedor.
- Copie el CSS generado en su hoja de estilo.
Consejos
- Utilice container queries cuando un componente deba adaptarse a su propio espacio disponible.
- Utilice media queries cuando el diseño dependa de todo el viewport.
- Los contenedores con nombre son útiles cuando los componentes anidados pueden depender de varios contenedores.
- Mantenga los selectores de componentes locales y predecibles, como .card, .panel o .product-card.
Herramientas relacionadas
Estas herramientas también pueden resultarle útiles.
Generador de Media Query CSS
Cree media queries CSS responsivas para breakpoints de ancho, orientación, modo oscuro, movimiento reducido y soporte para hover.
Utilidades varias
›
Generador de cuadrícula CSS
Cree diseños de cuadrícula CSS con columnas, filas, espacios, alineación, vista previa en vivo y CSS listo para copiar.
Utilidades varias
›
Generador CSS Flexbox
Cree diseños CSS flexbox con vista previa en vivo, controles de alineación, ajuste, dirección, espacio y CSS listo para copiar.
Utilidades varias
›
Generador de patrones de fondo CSS
Cree patrones de fondo CSS con puntos, cuadrículas, rayas, líneas diagonales y tableros de ajedrez.
Utilidades varias
›
Preguntas frecuentes sobre el generador de Container Query CSS
¿Qué es una container query CSS?
Una container query aplica CSS según el tamaño de un elemento contenedor, no del viewport del navegador.
¿Cuándo debo usar container queries en lugar de media queries?
Utilice container queries para componentes reutilizables que deben adaptarse dentro de distintos layouts. Utilice media queries para cambios a nivel de página.
¿Qué significa `container-type: inline-size`?
Permite consultar el eje en línea, generalmente el ancho del contenedor en modos de escritura horizontal.
¿Necesito un nombre de contenedor?
No. Los nombres de contenedor son opcionales, pero resultan útiles cuando quiere apuntar a un contenedor específico.