CSS container Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The container property lets an element establish a container context that descendant rules and container queries can target; rather than using the viewport as the reference for responsive conditions, that element becomes the reference frame for evaluating size- or other container-based queries. It functions as a high-level, declarative way to say “this element should behave as a self-contained layout scope” so that components can adapt based on the size and characteristics of their own container instead of the entire page.

When you apply the container property, you are conceptually assigning both an identity and a type to the element so that query rules can match against it. Those two aspects are reflected by the related longhand properties container-name and container-type, which control how a container is referenced and what aspects of the element (size, style containment, etc.) are used for query evaluation. Container-aware rules (for example, with the container query at-rule) then select styles based on that referenced container rather than the viewport, enabling truly component-scoped responsive behavior.

Beyond scoping, the semantics of container interact with layout and performance: declaring a container can limit the area of layout recalculations and restrict what gets considered when evaluating queries, which can improve rendering efficiency for componentized UIs. It is often used alongside containment strategies to create predictable, encapsulated components; the contain property is frequently mentioned in the same design patterns because it also governs how an element’s internal layout and rendering are isolated from the outside.

In practical design terms, the container property encourages building smaller, self-sufficient components that respond to their immediate context — the container — instead of relying on global viewport breakpoints. That shifts responsive design from a page-level approach to a component-level approach, simplifying reuse and composition: a component styled to adapt to its container will behave consistently whether it’s placed in a sidebar, a card, or a full-width section.

Definition

Initial value: See individual properties
Applies to: all elements
Inherited: no
Computed value: See individual properties
Animatable: See individual properties
JavaScript syntax: object.style.container

Syntax

container: <container-name> | <container-type>

Values

<container-name>A case-sensitive name for the containment context. More details on the syntax are covered in the container-name property page.
<container-type>The type of containment context. More details on the syntax are covered in the container-type property page.

Example

HTML

<div class='cards-grid'>

    <div class='card'>

        <img class='card__media' src='https://picsum.photos/seed/1/800/450' alt='Placeholder image'>

        <div class='card__content'>

            <h3 class='card__title'>Responsive Card</h3>

            <p class='card__text'>This layout responds to the container size using CSS Container Queries.</p>

            <button class='card__button'>Action</button>

        </div>

    </div>

    <div class='card'>

        <img class='card__media' src='https://picsum.photos/seed/2/800/450' alt='Placeholder image'>

        <div class='card__content'>

            <h3 class='card__title'>Another Card</h3>

            <p class='card__text'>Each card becomes a layout container that adapts independently.</p>

            <button class='card__button'>Explore</button>

        </div>

    </div>

</div>

CSS

/* Grid that holds cards */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    padding: 16px;
    background: #f5f6f7;
}

/* Each card is a container for container queries */
.card {
    container-type: inline-size;
    container-name: card;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.card__media {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.card__content {
    padding: 16px;
}

.card__title {
    margin: 0 0 8px 0;
    font-size: 1.125rem;
}

.card__text {
    margin: 0 0 12px 0;
    color: #444;
    line-height: 1.4;
}

.card__button {
    padding: 8px 12px;
    border: none;
    background: #0077ff;
    color: white;
    border-radius: 6px;
    cursor: pointer;
}

/* Container query: when the card's inline size is at least 520px, switch to horizontal layout */
@container card (min-width: 520px) {
    .card {
        flex-direction: row;
        align-items: stretch;
    }

    .card__media {
        width: 40%;
        height: auto;
    }

    .card__content {
        padding: 20px;
    }

    .card__title {
        font-size: 1.25rem;
    }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS container property. Hover over a browser icon to see the version that first introduced support for this CSS property.