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.
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
Further reading