CSS Container Queries: Make Course Cards Fit Any Column

Practical Web Development — Lesson 2 of 10 · Beginner to intermediate

A course card may appear in a wide catalogue and a narrow sidebar on the same screen. A viewport media query sees the same screen width in both locations. A container query lets the card respond to the space its parent actually provides. This exercise uses a named inline-size container and keeps the default layout readable without the query.

Separate the measuring box from the card

The wrapper is the query container. Its descendant changes layout. Keeping those responsibilities separate avoids trying to make an element query its own size. Copy this into an HTML file; the two wrappers intentionally have different maximum widths.

<style>
.course-slot { container: course / inline-size; max-width: 48rem; margin: 1rem 0; }
.course-slot.narrow { max-width: 20rem; }
.course-card { display: grid; gap: 1rem; padding: 1rem;
  border: 1px solid #888; border-radius: .5rem; }
.course-card h2 { margin: 0; overflow-wrap: anywhere; }
.course-card a { align-self: start; }
@container course (min-width: 32rem) {
  .course-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
</style>
<div class="course-slot">
  <article class="course-card">
    <div><h2>HTML fundamentals</h2><p>Build your first course page.</p></div>
    <a href="#lesson">Read lesson</a>
  </article>
</div>
<div class="course-slot narrow">
  <article class="course-card">
    <div><h2>JavaScript fundamentals</h2><p>Add a useful course filter.</p></div>
    <a href="#lesson">Read lesson</a>
  </article>
</div>
<p id="lesson">Lesson destination for this local layout demo.</p>

Choose the breakpoint from the content

The 32rem threshold is a design choice for this example, not a universal device size. Below it, the link occupies its own row. Above it, the text and action sit side by side. Resize the wrapper until your real title and action become cramped, then choose a threshold around that point.

The minmax(0, 1fr) text column can shrink without preserving a large automatic minimum. Long content still needs sensible wrapping. Avoid fixing the card height: translated labels, larger text and long titles need room to grow.

Keep a useful baseline

The one-column grid is declared outside the query. If a target browser does not apply the query, the content remains in a clear reading order. This is progressive enhancement: the wide arrangement improves presentation without becoming a condition for using the link.

Check four situations

• A narrow card on a wide desktop page should remain stacked.
• A wide card should put the link beside the text.
• At high zoom, content should remain readable without clipping.
• A long course name should wrap without overlapping the link.

Practice

Add a third card inside a two-column layout. Change the outer layout width without changing the viewport and observe which cards cross the threshold. Then explain why a viewport media query alone would not express the same component rule. Use viewport queries for page-level layout changes and container queries where a component needs to adapt to its allotted space.

Continue learning

Review our semantic HTML project, JavaScript course filter and course platform architecture.

Reference: Technical documentation for this lesson. Examples are learning exercises; test them in your environment.