Web Design Tutorial: Build Responsive Cards with CSS Container Queries

A container query adapts a card to the width of its container, rather than just the viewport.

This is useful when the same card appears in both a sidebar and the main content area.

Wrap the card in a parent element with the class card-wrap.

Define the parent: .card-wrap { container-type: inline-size; }

Create a single-column baseline: .card { display: grid; gap: 1rem; }

Add the layout rule: @container (min-width: 480px) { .card { grid-template-columns: 160px 1fr; } }

This rule styles a descendant; do not use a container’s own size query to style that container.

For images inside the card, use: .card img { width: 100%; height: auto; }

Test your target browsers and narrow and wide containers; the baseline must remain readable without this feature.

The result is a reusable card that responds to the space it actually occupies.

Official sources — Checked: October 5, 2026

• MDN — CSS container queries