Build a Responsive CSS Grid Card Gallery

intermediate

By FrontendAtlas Editorial · Updated Jul 9, 2026

Practice a realistic frontend interview prompt: create a responsive card gallery with CSS Grid, keep cards readable across widths, and explain how track sizing, gaps, and auto-placement work.

What you'll practice:

CSS Grid container setup
grid-template-columns
repeat()
minmax()
gap
responsive breakpoints
auto-placement
card minimum width
avoiding horizontal overflow
testing long content and extra cards

Requirements

Use the existing .gallery container and keep every .card as a direct grid child.
Required challenge solution: default layout must use repeat(2, minmax(0, 1fr)).
Required challenge solution: at min-width: 1024px, switch to repeat(4, minmax(0, 1fr)).
Use gap for spacing instead of card margins.
Set a safe shrink rule such as .card { min-width: 0; } so long content does not force horizontal overflow.
Do not manually position individual cards; let Grid auto-placement flow extra cards.

Acceptance criteria

.gallery uses display: grid.
Cards are direct grid children.
Spacing uses gap.
Default layout shows 2 equal columns.
Desktop layout switches to 4 columns at the required breakpoint.
Cards do not overlap or overflow.
Extra cards flow naturally without manual positioning.
Long text does not break the layout.
Solution explains why Grid is better than Flexbox for this two-dimensional layout.

Expected behavior

A strong solution should:

Render readable cards in two equal columns before the desktop breakpoint.
Render four equal columns at min-width: 1024px.
Keep card spacing consistent with one gap declaration.
Allow seven or more cards to wrap into new rows automatically.
Keep long card titles inside their grid tracks without horizontal page scroll.

Implementation notes

Use minmax(0, 1fr) for the exact required tracks so content minimums do not widen the columns.
Use .card { min-width: 0; } to let card contents shrink within their grid cell.
Use the optional auto-fit/minmax() approach only as a production variant; the challenge tests expect exact 2-to-4 columns.
Choose a real minimum card width, such as 220px, when using the production fluid variant.
Do not treat the production variant as an exact two-column mobile layout; it is intentionally fluid and can collapse to one column when two 220px tracks plus gap do not fit.

Common mistakes

Using four hard-coded columns on all screens.
Forgetting gap.
Using fixed card widths that create horizontal scroll.
Using Flexbox when rows and columns both matter.
Using repeat(4, 1fr) without a mobile fallback.
Forgetting minmax(0, 1fr) or a safe minimum card width.
Assuming the mock data length is fixed.
Not testing long card titles or missing images.
Expecting the production auto-fit variant to keep the same exact column count as the required interview solution.

Interview explanation

CSS Grid is a good fit for a card gallery because rows and columns both matter. I would define the gallery as a grid container, use gap for spacing, and choose either fixed breakpoint columns or auto-fit/minmax depending on the requirements. I would test long titles, extra cards, and narrow screens because card grids often fail when content is less tidy than the mock.

Testing checklist

Resize below 1024px and confirm the required solution stays at two equal columns.
Resize to 1024px or wider and confirm the required solution switches to four columns.
Add extra cards and confirm Grid auto-placement creates new rows.
Use a long title or missing image placeholder and confirm no horizontal overflow appears.
Compare the exact breakpoint solution with the optional auto-fit/minmax() production variant.
Load the production variant in a narrow preview and confirm a one-column fallback is acceptable when two 220px tracks plus gap cannot fit.

FAQ

Is CSS Grid or Flexbox better for card galleries?

CSS Grid is usually better because card galleries are two-dimensional layouts. Flexbox can wrap items, but Grid gives clearer control over columns, rows, gaps, and responsive tracks.

What does minmax() do in a card grid?

minmax() defines the smallest and largest size a grid track can take. It helps cards stay readable instead of shrinking into unusable columns.

Should I use fixed breakpoints or auto-fit with minmax()?

Use fixed breakpoints when the design requires exact column counts. Use auto-fit/minmax when the gallery should adapt fluidly to available space.

What do interviewers look for in a CSS Grid card layout?

They look for correct Grid usage, clean spacing, responsive behavior, overflow awareness, and the ability to explain why Grid fits the layout.

Solution

Overview

A strong interview solution separates the required test contract from the production trade-off. For this challenge, Variant A is the expected answer: two equal tracks by default and four equal tracks at 1024px. Variant B is intentionally fluid: auto-fit with a minimum card width can adapt to the container, and it may render one, two, three, or more columns depending on available space.

Variant A — Required 2-to-4 Column Solution

Define .gallery as a grid, use gap for spacing, and set the default tracks to repeat(2, minmax(0, 1fr)). At min-width: 1024px, switch to repeat(4, minmax(0, 1fr)). This is the version aligned with the interview prompt and automated checks.

<html>

<section class='gallery'>
  <article class='card'>
    <h2>
      Analytics dashboard
    </h2>
    <p>
      Overview card with key product metrics.
    </p>
  </article>
  <article class='card'>
    <h2>
      Checkout recovery campaign with a longer title
    </h2>
    <p>
      Long copy should wrap without forcing horizontal scroll.
    </p>
  </article>
  <article class='card'>
    <h2>
      Team activity
    </h2>
    <p>
      Recent collaboration updates and notes.
    </p>
  </article>
  <article class='card'>
    <h2>
      Release checklist
    </h2>
    <p>
      Tasks that need review before launch.
    </p>
  </article>
  <article class='card'>
    <h2>
      Empty state plan
    </h2>
    <p>
      Fallback messaging for missing images or data.
    </p>
  </article>
  <article class='card'>
    <h2>
      Customer feedback
    </h2>
    <p>
      Signals from support and interviews.
    </p>
  </article>
  <article class='card'>
    <h2>
      Extra card
    </h2>
    <p>
      This should flow into the next row automatically.
    </p>
  </article>
</section>

# CSS

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 2rem;
  background: #fafafa;
  color: #111827;
  line-height: 1.6;
}
.gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1024px) {
  .gallery {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.card {
  min-width: 0;
  background: #222;
  color: #fff;
  border-radius: 8px;
  padding: 1rem;
}
.card h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.card p {
  margin: 0;
  opacity: 0.85;
}

Variant B — Production Fluid auto-fit/minmax() Solution

For a production gallery, repeat(auto-fit, minmax(220px, 1fr)) can be preferable because the grid adapts to available space and preserves a readable minimum card width. This variant is intentionally fluid: it may render one, two, three, or more columns depending on the preview or container width. Grid only creates a second column when two 220px tracks plus gap fit, so a one-column narrow preview is expected. Use this when the product wants fluid behavior; keep Variant A when the challenge or tests require exact 2-to-4 columns.

<html>

<section class='gallery'>
  <article class='card'>
    <h2>
      Analytics dashboard
    </h2>
    <p>
      Overview card with key product metrics.
    </p>
  </article>
  <article class='card'>
    <h2>
      Checkout recovery campaign with a longer title
    </h2>
    <p>
      Long copy should wrap without forcing horizontal scroll.
    </p>
  </article>
  <article class='card'>
    <h2>
      Team activity
    </h2>
    <p>
      Recent collaboration updates and notes.
    </p>
  </article>
  <article class='card'>
    <h2>
      Release checklist
    </h2>
    <p>
      Tasks that need review before launch.
    </p>
  </article>
  <article class='card'>
    <h2>
      Empty state plan
    </h2>
    <p>
      Fallback messaging for missing images or data.
    </p>
  </article>
  <article class='card'>
    <h2>
      Customer feedback
    </h2>
    <p>
      Signals from support and interviews.
    </p>
  </article>
  <article class='card'>
    <h2>
      Extra card
    </h2>
    <p>
      This should flow into the next row automatically.
    </p>
  </article>
</section>

# CSS

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 2rem;
  background: #fafafa;
  color: #111827;
  line-height: 1.6;
}
.gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.card {
  min-width: 0;
  background: #222;
  color: #fff;
  border-radius: 8px;
  padding: 1rem;
}
.card h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.card p {
  margin: 0;
  opacity: 0.85;
}

Notes & Pitfalls

Pitfalls

Using four hard-coded columns on all screens creates narrow cards and mobile overflow.
Mixing the optional `auto-fit` solution into the required test answer can fail exact column-count checks.
Treating the production `auto-fit` variant as an exact two-column mobile layout ignores its intentional one-column fallback.
Using fixed card widths fights the grid track sizing and can create horizontal scroll.
Assuming the mock data length is fixed hides auto-placement bugs.

Edge cases

Long card titles should wrap inside the card instead of widening the grid track.
Seven or more cards should flow into additional rows without manual placement.
Cards with missing images or shorter content should still keep consistent spacing.

Techniques

Use `repeat(2, minmax(0, 1fr))` and `repeat(4, minmax(0, 1fr))` for exact breakpoint requirements.
Use `gap` on the grid container for consistent row and column spacing.
Use `auto-fit` with `minmax(220px, 1fr)` when production flexibility matters more than exact column counts.

Common mistakes on this challenge

Match the required CSS Grid card contract
This prompt expects exact 2-to-4 Grid tracks, with the auto-fit/minmax version kept as a production variant.
- Start with `.gallery { display:grid; gap:1rem; grid-template-columns:repeat(2, minmax(0, 1fr)); }`.
- At `min-width:1024px`, switch only the gallery to `repeat(4, minmax(0, 1fr))` for the required solution.
- Add `.card { min-width:0; }` and heading wrapping so long card titles do not force horizontal overflow.
- Do not use the `auto-fit/minmax(220px, 1fr)` production variant when the tests expect exact 2-to-4 columns.

Resources

Guides

Frontend interview preparation guideGuide Frontend coding interview questions and prep guideBlueprint JavaScript Problems That Actually Show UpBlueprint Build Great UI in 60 MinutesBlueprint

Preparing for interviews? Use Frontend Coding Challenges first, then move into a concrete Study Plan before targeted Company Prep.

Open frontend interview questions Browse CSS interview questions Open Essential 60 Open Machine Coding Hub Open Frontend Coding Challenges Open System Design Open Interview Prep Guide Open System Design Blueprint Open Framework Prep Paths Open Study Plans Open 7-day crash study plan Open Company Prep