Layout pattern · updated 3 Sept 2026
Card grid
A card grid presents a set of like items, each in its own bordered or shadowed container, arranged in equal columns that reflow with the viewport. Each card repeats one internal structure, image then title then metadata then actions, so the eye scans the set as a unit.
Think of it as
A contact sheet from a roll of film. Every frame the same size, in the same order, so the differences between them are the only thing you see.
Worked example
The showcase on this site is a card grid: three columns at desktop, two at 900px, one at 560px, every card carrying the render, the name, the host, the editorial line, the tags and the date it was added. The grid is filtered by multi-select chips that recount themselves on every change.
Why it matters
Repetition is the whole value. A card grid is the most efficient way to show that a design system is consistent, because forty cards make one radius or one shadow visible forty times. It is also the layout that most punishes a missing min-width on grid children, which makes a page scroll sideways on a phone.
How it fails
Cards of different heights because one has a longer title, with no line clamp. A hover lift on every card that makes the page feel like it is breathing. Missing min-width:0 on the grid item, so one long URL widens the whole document.
What to measure open the decoder →
- Number of columns at 1280px, 900px and 390px
- Whether every card shares one radius and one shadow
- Line clamps on titles and descriptions
- Horizontal overflow at 390px, which the decoder's consistency card and our overflow gate both catch
Where you meet it
- Galleries and directories
- Blog indexes
- E-commerce category pages
- Dashboards
Showcase collections that exhibit it
Build it
Next rung
When equal cards are not enough, the grid becomes a bento grid; when the items are testimonials, it becomes a wall. Both are card grids with one rule relaxed.