Media queries react to the screen size. Container queries react to the size of a parent container, so a component adapts to the space it actually has. This is ideal for sidebars, widgets and reusable cards.

Step 1: define the container

.lotgrafix-card-wrapper {
    container-type: inline-size;
    container-name: lotgrafix-card;
}

Step 2: style the child with @container

.lotgrafix-card {
    display: grid;
    gap: 16px;
}

@container lotgrafix-card ( min-width: 500px ) {
    .lotgrafix-card {
        grid-template-columns: 200px 1fr;
    }
}

HTML

<div class="lotgrafix-card-wrapper">
    <article class="lotgrafix-card">
        <img src="image.jpg" alt="">
        <div>
            <h3>Title</h3>
            <p>Description</p>
        </div>
    </article>
</div>

Container query units

• cqw: 1% of the container width.
• cqh: 1% of the container height.
• cqi: 1% of the container inline size.

.lotgrafix-card h3 {
    font-size: clamp( 1rem, 5cqi, 2rem );
}

Important notes

• The element with @container rules must be a child of the container, not the container itself.
• Use container-type: inline-size for width based queries.
• Supported in all modern browsers.