Make a Width Container

Mark the parent whose inline size should drive nested layout with container-type: inline-size.

Containment context

Resize the browser. The rail and main column are each containers. The same card class will adapt to its parent in the next lesson — not to the viewport alone.

Main container

Important CSS

.cq-rail,
.cq-main {
  container-type: inline-size;
  container-name: slot;
}