CSS container Shorthand — Set Name and Type in One Line

The container Shorthand Property

The container shorthand lets you set both container-name and container-type in a single declaration. The syntax is: container: <name> / <type>.

Basic Syntax

/* Shorthand */
.card-wrapper {
  container: card / inline-size;
}

/* Equivalent longhand */
.card-wrapper {
  container-name: card;
  container-type: inline-size;
}

Multiple Names

A container can have multiple names, separated by spaces:

.section {
  container: main-content layout / inline-size;
}

/* Both of these work: */
@container main-content (min-width: 600px) { /* ... */ }
@container layout (min-width: 600px) { /* ... */ }

Type-Only Shorthand

If you only want to set the type without a name:

.container {
  container-type: inline-size;
}
/* There is no shorthand for type-only */

When to Use the Shorthand

• ✅ When you always need both a name and a type (the common case for named containers)
• ✅ For cleaner, more concise CSS
• ❌ When you only need container-type without a name (use the longhand)

Real-World Example

.dashboard-widget {
  container: widget / inline-size;
  padding: 1rem;
  border-radius: 8px;
  background: var(--surface);
}

@container widget (min-width: 350px) {
  .widget-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}