CSS container-name 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-name property assigns one or more identifiers to an element so it can be targeted by container query rules. It does not itself change layout or sizing; instead it acts as a label that container query selectors can use to decide which container(s) should be evaluated for conditions. Because the property only names the container, the presence or absence of a name determines whether a named @container rule can match that element as the query container.

When you write container query rules, you can restrict them to containers with a particular label; those named queries will only apply when an ancestor element carries the matching container-name. That behavior works together with the property that determines whether an element actually establishes a query container and what axes it exposes - container-type. There is also a shorthand that lets authors set a container’s name and type together; authors often use that shorthand to keep naming and containment semantics combined for a given element - container.

From an authoring perspective, naming containers is useful for scoping component styles so they only respond to intended query contexts. The property is not inherited and is governed by the normal cascade, so you control which elements become queryable by applying or overriding it on specific container elements. If an element has no name, it can still be used by anonymous (unnamed) container queries; assigning names is primarily a tool for disambiguation and for creating explicit boundaries that prevent unrelated container query rules from matching unexpectedly.

Definition

Initial value: none
Applies to: all elements
Inherited: no
Computed value: none or an ordered list of identifiers
Animatable: no
JavaScript syntax: object.style.containerName

Syntax

container-name: <container-name>

Values

<container-name>A case-sensitive string that is used to identify the container.

Example

HTML

<div class="container-demo">

  <h1>Product cards</h1>

  <div class="cards">

    <article class="card">

      <img class="thumbnail" src="https://placehold.co/300x180" alt="Product A">

      <div class="content">

        <h2 class="title">Product A</h2>

        <p class="desc">A short description of product A that explains the key features.</p>

        <button class="buy">Buy  -  $19</button>

      </div>

    </article>



    <article class="card">

      <img class="thumbnail" src="https://placehold.co/300x180" alt="Product B">

      <div class="content">

        <h2 class="title">Product B</h2>

        <p class="desc">A short description of product B with a little more detail to test wrapping.</p>

        <button class="buy">Buy  -  $29</button>

      </div>

    </article>



    <article class="card">

      <img class="thumbnail" src="https://placehold.co/300x180" alt="Product C">

      <div class="content">

        <h2 class="title">Product C</h2>

        <p class="desc">A short description of product C to show consistent layout across cards.</p>

        <button class="buy">Buy  -  $39</button>

      </div>

    </article>

  </div>

</div>

CSS

/* Container-name example CSS */
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #f5f7fb;
  color: #111;
}

.container-demo {
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 16px;
}

h1 {
  font-size: 1.5rem;
  margin: 0 0 20px;
}

.cards {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card {
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(16,24,40,0.06);
  /* Make this element a query container and give it the name 'card' */
  container-type: inline-size;
  container-name: card;
}

.card .thumbnail {
  display: block;
  width: 100%;
  height: auto;
}

.card .content {
  padding: 16px;
}

.title {
  font-size: 1.1rem;
  margin: 0 0 8px;
}

.desc {
  color: #475569;
  margin: 0 0 12px;
  line-height: 1.3;
}

.buy {
  background: #0b74de;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 600;
}

/* Container query: when the individual card is at least 480px wide, lay out thumbnail and content side-by-side */
@container card (min-width: 480px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 180px;
    align-items: center;
  }

  .card .thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .card .content {
    padding: 20px;
  }

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

/* Larger card layout */
@container card (min-width: 760px) {
  .card {
    grid-template-columns: 1fr 240px;
  }

  .title {
    font-size: 1.4rem;
  }

  .buy {
    padding: 10px 14px;
  }
}

Result

Editor

Browser Support

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