CSS Grid / INTERACTIVE PRACTICE

Build a responsive card grid

Turn three feature cards into equal columns that become a readable single column on mobile.

What you are building

Use this layout for feature lists, service offerings, or article collections.

Requirements

At 800px, show three equal-width cards in one row. At 320px, show one card per row. Use CSS Grid with a gap of at least 16px, and keep every card inside the viewport.

Use CSS Grid on .card-grid; keep three direct .feature-card children visible in normal flow.
At 800px: show three equal-width cards on the same row.
At 320px: stack the cards in one equal-width column.
At both widths: leave at least 16px between rows and columns, with no horizontal page overflow.

Keep any supplied classes so the checks can find your layout. Need a refresher? CSS Grid lessons.

Review a concept when you need it

Grid introduction — the container, columns, and gaps.
Track sizing and overflow — share remaining width and investigate minimum sizes.
Media queries — reuse the media queries you learned in the CSS course.

Checks run at 320px and 800px. The suggested 600px breakpoint is one approach, not a required CSS formula. Text, colors, and corner shapes do not need to match. Keep the supplied classes and all three cards.

Why this practice comes now

You have learned grid tracks and fractional sizing. Combine them with earlier CSS media queries to build equal cards that stack on a narrow screen.

Concepts to recall

Grid container — Columns and gaps belong on the cards’ parent.
Fractional tracks — Divide remaining width evenly and consider track minimums.
Breakpoints — A media query can switch column counts without changing HTML.

Start with one action

Compare the reference at both widths. Then run the starter and find the .card-grid rule; activate Grid on that parent first.

Progress loads in this browser

Your code and completion are saved in this browser. Pass all solution checks to complete this practice in My progress. Editing or resetting code keeps your completion.

Reference preview

Compare the arrangement before editing. This solved reference stays unchanged as you work. On a narrow screen, scroll inside the desktop preview to see its full width.

320px: three cards stacked in one column. At least 16px separates the cards. These controls also resize your working preview.

HTML editor

<section class="card-grid">
  <article class="feature-card"><h2>Discover</h2><p>Find a small idea worth exploring.</p></article>
  <article class="feature-card"><h2>Build</h2><p>Turn your idea into a working layout.</p></article>
  <article class="feature-card"><h2>Reflect</h2><p>Understand what made your solution work.</p></article>
</section>

CSS editor

body { background: #eef2ff; padding: 16px; }
.card-grid {
  /* Create equal columns and space between cards. */
}
.feature-card {
  padding: 20px;
  background: white;
  color: #3730a3;
  border-radius: 12px;
}
/* Add your small-screen media query below. */

These controls resize both your preview and the target. Checks always test both widths. Scroll within a preview to inspect the full layout.

Preview supports text, headings, and layout elements with classes. Scripts, links, forms, and external resources are disabled.

Includes your current work as HTML, CSS, and JavaScript files. How to run it on your computer →

Stuck? Open one hint at a time, try a change, and check again before opening the next. The complete answer stays in the separate explained solution.

Hint 1

Observe: compare the reference at both widths. How many cards share a row? Which things stay the same when the width changes?

Hint 2

Locate: the parent .card-grid owns the columns and the space between them. Inspect its layout mode before changing individual cards.

Hint 3

Share space: equal fractional tracks divide the width left after gaps. A zero track minimum can prevent content from forcing a column wider. Review the track-sizing lesson if the page overflows.

Hint 4

Adapt and verify: a media query can change the number of columns while keeping the HTML unchanged. Try a 600px breakpoint, then inspect both preview sizes and run Check solution again. Avoid hiding overflow to disguise a layout that is too wide.

See the explained solution

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 600px) {
  .card-grid { grid-template-columns: minmax(0, 1fr); }
}

Fractional tracks divide the available width after gaps. A zero minimum lets each track shrink without content forcing it wider. On small screens a single track gives each card enough room to read. Add these rules to the starter CSS, then run the checks.

Choose another practice →