AddThisFeature
Sign in

Responsive Card Grid

Make card grids reflow at every width without crushed columns or sideways scroll.

moderate UI & Polish

What it adds

A shared grid behaviour for card collections that chooses its column count from the available width and the card's own minimum readable width.

What your agent is told to do

5
  1. 1

    Find every collection of cards in the app — dashboards, galleries, pricing tiers, project lists — and drive them all from one grid behaviour rather than a per-screen set of breakpoints.

  2. 2

    Derive the column count from a minimum readable card width and the space actually available, so the grid adapts inside a narrowed sidebar or a modal, not only at the window's breakpoints.

  3. 3

    Decide deliberately whether cards in a row stretch to a common height or keep their natural heights, and apply that decision consistently. Mixed behaviour within one grid reads as a bug.

  4. 4

    Constrain long unbroken strings — URLs, file names, identifiers, tokens without spaces — inside the card so they wrap or truncate rather than widening the column and forcing the page to scroll horizontally.

  5. 5

    Do not reorder cards visually to fill gaps. Absolute positioning or column-first flow separates the reading order from the DOM order, which breaks keyboard tabbing and screen reader sequence; keep source order and accept the ragged last row.

Edge cases it handles

7
  • A card's minimum width must come from what it contains — a title, a stat, a set of controls — not from an arbitrary pixel value that leaves the contents crushed at one size and stranded at another.
  • Visual order and DOM order must stay identical, so that tabbing through the grid and reading it aloud follow the same path the eye takes.
  • Cards with different content lengths will not naturally match in height. Either equalise them within a row or let them ride, but say which, and make sure the taller card does not leave a hole beneath its neighbour.
  • A single long unbroken token inside one card must not set the width of the whole column and push the layout past the viewport.
  • The final row with one or two cards must not stretch them across the full width; leave the gap.
  • An empty collection needs its own state rather than an empty grid container that collapses to nothing.
  • Images and media inside cards are governed by Media Aspect Ratio System — the grid owns column count and gutters, the media system owns the shape of what sits inside a card.

Definition of done

8
  • Card grids reflow based on their container's width, not only the viewport's.
  • No layout width causes horizontal scrolling on the page body.
  • Tab order and reading order match the visual order at every column count.
  • Long unbroken strings wrap or truncate inside the card and never widen the column.
  • Height behaviour within a row is uniform across every grid in the app.
  • A partially filled last row leaves cards at their normal width.
  • The feature matches the existing design system.
  • No existing functionality is broken.

Related features

How it works

  1. 1

    Copy the link

    Grab the Markdown instruction URL for this feature.

  2. 2

    Give it to your AI

    Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.

  3. 3

    It inspects, then implements

    Your agent reads your existing app first, then adds the feature to fit it.

Works with your stack

These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.

Need it tighter than that? Customize the feature and tell it exactly what you're running.