Crea una consulta de contenedor con nombre y ajusta la vista previa

Nombra el contenedor, elige container-type y una condición de ancho, y arrastra la vista previa: el indicador da el ancho de la caja de contenido y si la consulta coincide ahora mismo, y la exportación es la regla @container completa. Los intervalos conservan los números escritos: si el mínimo supera el máximo no coincide nada y el indicador lo dice.

Se ejecuta localmente en tu navegador

Ver categoría: Frontend y diseño (34)

· container-type · container-name · @container

CONTROLES DE CONSULTA

container-type

min-width (px)

max-width (px)

620px

VISTA DE TAMAÑO

01Contrato de API

02Salida de compilación

03Comprobación en ejecución

04Notas de versión

EXPORTAR CSS

Cómo crear y probar una consulta de contenedor

Pon nombre al contenedor, elige container-type y una condición de ancho, y arrastra la vista previa: el indicador muestra el ancho de la caja de contenido del contenedor y si la consulta coincide en ese momento. El panel de exportación contiene el CSS completo: la declaración .component-shell con container-type y container-name, más el bloque @container que cambia la cuadrícula al número de columnas elegido.

Todos los datos de esta guía se midieron durante las pruebas: el indicador coincidió con la cuadrícula renderizada en los 11 estados de teclado, los ocho valores por defecto son card-shell / inline-size / min / 480 / 760 / 620 px / 3 columnas / 16 px, y el botón Copiar CSS escribió exactamente el texto del panel (comparado con el portapapeles).

Escribe un nombre de contenedor (hasta 32 caracteres) y elige container-type: inline-size o size. El nombre pasa a minúsculas, los espacios y signos se convierten en - y un dígito inicial recibe el prefijo x-.

Elige la condición: ancho mínimo, ancho máximo o intervalo de ancho, y escribe los valores min-width / max-width que quieres en la regla.

Arrastra Ancho de la vista previa entre 220 y 900 px. El indicador se actualiza al arrastrar: «Coincide» significa que la regla de la cuadrícula se aplica dentro de la vista previa y «No coincide» que no.

Ajusta Columnas al coincidir (1–4) y Espacio (0–64 px). Ambos valores se limitan a esos rangos en la vista previa y en el CSS exportado.

Pulsa Copiar CSS y pega el resultado; Restablecer devuelve card-shell, inline-size, min, 480, 760, 620 px, 3 columnas y 16 px.

Qué mide la vista previa, qué números conserva el CSS y qué no cubre la herramienta

Qué mide la vista previa

El indicador cuenta la caja de contenido del contenedor: quedan fuera los 13 px de relleno de cada lado, así que una vista previa de 620 px muestra 620px. La consulta mide esa misma caja, y por eso ambos coinciden. «Coincide» pasa las cuatro tarjetas al número de columnas elegido; «No coincide» las deja en una sola columna.

El escenario también limita la vista previa: en una ventana de 1360 px el control llega a 900, pero la vista previa se detiene en 878 px y el indicador informa 878px, no el valor pedido. container-type: size conserva la altura que ya tenía (204 px en una fila, 352 px apilada) para que la demostración no se colapse con la contención de tamaño.

Los números que escribes son los que salen

Los dos campos de ancho son independientes. Un intervalo exporta ambos valores tal cual: min 1000 con max 300 escribe (min-width: 1000px) and (max-width: 300px), que nunca coincide, y el indicador dice «No coincide» en lugar de reescribir la regla en silencio. El modo máximo usa solo el campo max, así que min-width ya no se cuela en él.

Columnas y espacio se limitan a lo que permiten los controles: escribir 7 columnas exporta repeat(4, minmax(0, 1fr)) y 80 px exporta gap: 64px, los mismos valores que renderiza la vista previa. Copiar CSS pone ese texto exacto en el portapapeles y Restablecer devuelve los ocho valores por defecto.

Lo que la herramienta no hace

Cubre un contenedor con nombre y solo condiciones de ancho: min-width, max-width o intervalo. No hay consultas de estilo, ni de estado de desplazamiento, ni de altura sola, ni un segundo contenedor; el CSS que imprime es andamiaje de ejemplo — .component-shell y .component-grid — para renombrar en tu propio marcado.

Nada sale de la página. Mientras se movían los controles y se copiaba el CSS durante las pruebas, el navegador no envió ninguna petición, y el carril lo indica. El texto del indicador está traducido en los seis idiomas, incluidos el francés Correspond / Ne correspond pas y el japonés 一致 / 一致しない.