Auto-responsive card grid

The RAM pattern — cards reflow from 1 to N columns with zero media queries.

Card one

Resize the window to see columns adapt.

Card two

No media queries needed.

Card three

Minimum 14 rem per card.

Card four

Extra cards just wrap.

Widely supported

gridlayout

Quick implementation

/* RAM: Repeat, Auto, Minmax */
.card-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: 1rem;
}

/* min(100%, 14rem) prevents overflow on small screens */

Prompt this to your LLM

Includes role, constraints, and variations.

You are a senior frontend engineer.

Goal: Create a responsive card grid that adapts its column count based on available space — no media queries.

Technical constraints:
- Use CSS Grid with repeat(auto-fill, minmax(min(100%, MIN_WIDTH), 1fr)).
- The min(100%, MIN_WIDTH) wrapper prevents overflow when the container is narrower than MIN_WIDTH.
- Use gap for spacing between cards.
- Cards should stretch equally within each row (1fr).
- auto-fill (not auto-fit) so empty tracks preserve their space.

Variations:
A) Basic card grid with 14rem minimum card width.
B) Photo gallery with 10rem minimum and aspect-ratio: 1 on items.
C) Dashboard widgets with 20rem minimum.

Return HTML + CSS. No JavaScript.

Why this matters

Media-query grids break at arbitrary widths and need constant maintenance. The RAM pattern — Repeat, Auto, Minmax — lets CSS calculate how many columns fit. Add a card, remove a card, change the container width: it just works. This is the most-used grid pattern in production CSS.

The logic

repeat(auto-fill, ...) tells the browser to create as many tracks as fit. minmax(min(100%, 14rem), 1fr) gives each track a floor of 14rem and a ceiling of 1fr (equal share). The min(100%, 14rem) inner function ensures a single card on small screens doesn't overflow — it caps at 100% of the container.

Accessibility & performance

Grid reflow is handled by the layout engine with no repaints. Screen readers follow source order regardless of visual column count. Use semantic list markup (<ul>/<li>) for card collections so assistive tech announces the item count.