Layout without page breakpoints

Before you begin

By the end, you can…

• Distinguish viewport and component responsiveness
• Use intrinsic sizing before adding breakpoints
• Build a component that responds to its container

01 / Understand

The viewport is not the component

A viewport media query knows the browser width, not the space a component actually receives. The same card may live in a full-width page, a split panel, or a narrow sidebar at the same viewport size. Container queries let the card respond to its own layout context.

Begin with intrinsic rules: minmax(), min(), max(), clamp(), flex wrapping, and grid auto-placement. They allow content to negotiate space without a list of device guesses. Add a container query only when the component needs a meaningful change in composition.

02 / Apply

A component owns its adaptation

Declare container-type on the component’s parent, then query that container with inline-size. Keep breakpoints local and name them after the design change—stacked card, roomy card—not a device.

Stress-test with long titles, translated text, 200% zoom, missing images, and a very narrow parent. The useful breakpoint is where the content stops working, not where a framework says tablet begins.

.card-region { container-type: inline-size; }
.card { display: grid; gap: 1rem; }
@container (width > 34rem) {
  .card { grid-template-columns: 12rem 1fr; }
}

03 / Make

Your studio task

Make — Create a card rail that changes composition from its own available width.

1. Place the same component in one narrow and one wide parent.
2. Use intrinsic sizing to remove avoidable overflow.
3. Add one container query for a genuine composition change.
4. Test long content, zoom, and a missing optional element.

04 / Check

Knowledge check