Card Grid
You might say
Show the content as cards in a grid, with more columns on wide screens and wrapping on narrow ones.
Arrange similar cards in a responsive gridA card grid helps people browse products, templates, articles, or projects with a shared visual structure. Define how columns change with width, keep card content comparable, and avoid forcing every card to the same height when content differs greatly.
You can say this to an AI Agent
Build the template list as a responsive card grid. Derive minimum card width from title, image, and actions, manage spacing with one gap, and reduce columns automatically. Test long titles, missing images, and mobile width.
When to use it
- Product catalog
- Template gallery
- Project overview
- Visual content browser
When NOT to use it
- Use cards for dense field-by-field comparison
- Keep too many columns on a phone
- Give each card a completely different structure
- Crop important content just to equalize every height
Anatomy
Card
The grid container, which defines the columns and spacing
Cards with the same structure are easier to scan consistently
The gaps between cards, declared once for the whole grid
Variants
AutoFill
When the card has a reasonable minimum width and the number of columns needs to change with the container
Two Cols
The card contains a lot of content and requires a large preview
Three Cols
Backend list with stable content width
Typical use cases
Product catalog
Template gallery
Portfolio
Project list
"Summer" related materials 12,408 pieces · Sorted by popularity
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check