CSS container queries

<< Responsive Preferencias de usuario >>

Antes de empezar, os recomiendo que veáis un vídeo muy interesante sobre @container

Las Container Queries te permiten aplicar estilos a un elemento basándose en el tamaño de su contenedor padre, en lugar de basarse en el tamaño de toda la ventana del navegador (el viewport).

Este es un cambio fundamental. Hasta ahora, con las media queries (@media), un componente solo podía adaptarse al tamaño de la página entera. Con las container queries (@container), un componente puede ser verdaderamente modular y "consciente" del espacio que se le asigna.

Imagina que tenemos una tarjeta de producto y queremos que:

Si está en la sección principal de la página (mucho espacio), se muestre en horizontal (imagen a la izquierda, texto a la derecha).
Si la pones en una barra lateral (poco espacio), se muestre en vertical (imagen arriba, texto abajo)

Las container queries solucionan esto permitiendo que la tarjeta se adapte a su contenedor directo (.main-content o .sidebar), sin importar el tamaño de la ventana.

¿Cómo funcionan?

Definir un Contenedor

Primero, tienes que decirle al navegador qué elemento actuará como un "contenedor de consulta".

container-type

Definir un Contenedor: Primero, tienes que decirle al navegador qué elemento actuará como un "contenedor de consulta". Esto se hace con la propiedad container-type.

container-type: inline-size; Es la más común. Hace que el contenedor sea consultable por su ancho.
container-type: size; Permite consultar por ancho y alto.

container-name

Podemos darle un nombre al contenedor para poder hacer referencia a él mediante la propiedad container-name

.contenedor-padre {
  container-type: inline-size;
  container-name: mi-contenedor; /* Opcional pero muy útil */
}

(atajo) container

Con la propiedad container, podemos darle valor la propiedad container-type y container-name en un solo paso: container: container-name / container-type.

@container

Luego, usas la regla @container (que se parece mucho a @media) para aplicar estilos a los elementos dentro de ese contenedor cuando este alcanza cierto tamaño.

/* Si 'mi-contenedor' tiene al menos 500px de ancho... */
@container mi-contenedor (min-width: 500px) {
  .tarjeta-hija {
    /* ...aplica estos estilos. */
  }
}

Veamos un ejemplo, crearemos una tarjeta de evento. Tendremos dos áreas en la página: una ancha y una barra lateral estrecha. Pondremos la misma tarjeta en ambos lugares y verás cómo adopta un diseño completamente diferente en cada uno, ¡al mismo tiempo!

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF--8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de Container Queries</title>
    <link rel="stylesheet" href="4.containers.css">
</head>
<body>

    <header>
        <h1>Próximos Eventos</h1>
    </header>

    <div class="page-layout">
        <main class="main-content">
            <h2>En nuestra sala principal</h2>
            <article class="event-card">
                <img src="https://www.elrenorenardo.com/wp-content/uploads/2023/01/2018-Hostiopatia.jpg" alt="Concierto de Jazz">
                <div class="event-info">
                    <h3>Concierto de Jazz Nocturno</h3>
                    <div class="event-meta">
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16" fill="currentColor" aria-hidden="true" style="vertical-align: middle; margin-right: 8px;">
                                <path d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H64V24c0-13.3-10.7-24-24-24S16 10.7 16 24V64H0V472c0 22.1 17.9 40 40 40H408c22.1 0 40-17.9 40-40V64H352V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H152V24zM48 192H400V472c0 4.4-3.6 8-8 8H56c-4.4 0-8-3.6-8-8V192zm-8-48h8H400h8v48H0V144z"/>
                            </svg>
                            25 Octubre, 2025
                        </span>
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="16" height="16" fill="currentColor" aria-hidden="true" style="vertical-align: middle; margin-right: 8px;">
                                <path d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/>
                            </svg>
                            Gran Teatro
                        </span>
                    </div>
                    <p>Una noche mágica con El Reno Renardo es un grupo musical español de heavy metal humorístico o freak metal, nacido de un proyecto en línea en solitario de Jevo Jevardo. Tras dos años de bastante éxito en Internet, se decidió crear un concierto, para lo cual se reclutó al resto de miembros y se formó la banda en sí misma.</p>
                    <a href="#" class="btn">Comprar Entradas</a>
                </div>
            </article>
        </main>

        <aside class="sidebar">
            <h2>Relacionados</h2>
            <article class="event-card">
                <img src="https://www.elrenorenardo.com/wp-content/uploads/2023/01/2018-Hostiopatia.jpg" alt="Concierto de Jazz">
                <div class="event-info">
                    <h3>Concierto de Jazz Nocturno</h3>
                    <div class="event-meta">
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16" fill="currentColor" aria-hidden="true" style="vertical-align: middle; margin-right: 8px;">
                                <path d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H64V24c0-13.3-10.7-24-24-24S16 10.7 16 24V64H0V472c0 22.1 17.9 40 40 40H408c22.1 0 40-17.9 40-40V64H352V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H152V24zM48 192H400V472c0 4.4-3.6 8-8 8H56c-4.4 0-8-3.6-8-8V192zm-8-48h8H400h8v48H0V144z"/>
                            </svg>
                            25 Octubre, 2025
                        </span>
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="16" height="16" fill="currentColor" aria-hidden="true" style="vertical-align: middle; margin-right: 8px;">
                                <path d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/>
                            </svg>
                            Gran Teatro
                        </span>
                    </div>
                    <p>Una noche mágica con El Reno Renardo es un grupo musical español de heavy metal humorístico o freak metal, nacido de un proyecto en línea en solitario de Jevo Jevardo. Tras dos años de bastante éxito en Internet, se decidió crear un concierto, para lo cual se reclutó al resto de miembros y se formó la banda en sí misma.</p>
                    <a href="#" class="btn">Comprar Entradas</a>
                </div>
            </article>
        </aside>
    </div>

</body>
</html>

En la sección principal (.main-content), que es ancha, verás la tarjeta en su diseño horizontal. La imagen estará a la izquierda y todo el contenido de texto a la derecha.
En la barra lateral (.sidebar), que es estrecha, verás la tarjeta en su diseño vertical por defecto. La imagen estará arriba y el contenido apilado debajo.

Verás ambos diseños al mismo tiempo en la misma página, demostrando que cada componente responde a su propio contexto y no a la página global.

<< Responsive Preferencias de usuario >>