Layouts · Content display
Card Grid
Also called: Card layout, Grid view, Card list, Tile layout
Items of the same kind become cards of equal size, arranged neatly in rows and columns. Each card has a cover image, a title and a bit of key info.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstShow the project list as a card grid: 4 cards per row with 16px gaps, all cards the same width and height, white background, 8px border radius. Each card has a 16:9 cover image on top, then the title (one line max, truncate with an ellipsis), a two-line description, and at the bottom the last updated time and an "Open" button. Show 2 cards per row on tablets and 1 per row on phones.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Card Grid is what you need.
Use Card Grid when
- Items share the same structure, each only needs three to five fields, and users pick by browsing
- Every item has a representative cover image or icon, and images and text matter equally
- A moderate number of items (a few dozen) with no need to compare them field by field
Pick something else when
Many similar items, each with lots of fields that need column-by-column comparison
Use insteadData TableImage heights vary a lot and you want to keep their original aspect ratios
Use insteadMasonry LayoutThe content is almost all images and the text can be dropped
Use insteadGalleryEach item is just a one-line title with no image
Use insteadList View
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
A dozen fields crammed into each card, turning every card into a mini table
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
Card heights don't match, so the cards in a row look uneven
- 03
Cards used even when there are no images, so the screen is full of big white boxes with one line of title each
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
Cards of equal width and height aligned in rows and columns. Each card has, from top to bottom, a cover, a title, short info and action buttons.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A card grid puts each record in a card. The cards all have the same width and height, with three or four per row, lined up left to right and top to bottom. Each card usually has a cover image or icon, a title, two or three lines of short info and one or two action buttons. You see it in product listings, project lists and template marketplaces.
Its strength is that it's visual and easy to pick from. Images take up a lot of space, so users can glance at the cover and title and decide what to click. The downside is that each card fits only a few fields, and the same field is scattered across different cards, so you can't line them up in columns and compare them like in a table.
It's easy to confuse with a Masonry Layout or a Gallery. In a card grid, every card has the same width and height, rows and columns line up, and images and text matter equally. In masonry, cards have the same width but different heights and are staggered in columns. In a gallery, it's almost all images with very little text.
Developer infoTerm ID, DOM cues, match priority
- Term ID
layout-card-grid- DOM selectors
- No DOM cues. This concept isn't detected directly on a page.
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026