Card grid
Three or more like items side by side, row after row. Lets people compare and choose among things of the same kind.
Good for: Products, articles, team, features, galleries.
Weak for: Things that need an order or a story; a grid of six look-alike claims says little.
One or two across on phones, three or four on desktop; the cards keep their shape.
The look, in Stylogeny
- Modular grid: Fields defined by rows and columns; every element snaps to modules.
- Repetition & rhythm: Repeated units create a visual cadence.
- Flat hierarchy: Elements carry equal weight; the reader chooses the path.
Parts that show it
- Shop by category
- Featured products
- Filtered list
- Price levels
- Benefit grid
- How it works
- Numbers band
- Timeline
- Testimonials
- Case studies
- Team
- Promises and marks
- Article overview
- Gallery
- Portfolio grid
- Header with mega menu
- Tab bar on phones
- Buy together
- Review scores
- Video stories
- Social feed
- Wall of reviews
- Awards
- Help topics
- Delivery and returns in short
- Read next
- Rooms
- Tickets
- Line-up
- Shop home page
- Category page
- Local business home page
- Service page
- Software home page
- Pricing page
- Campaign landing page
- About page
- Article
- Article overview
- Case study
- Portfolio
- Restaurant or venue home page
- Search and listings home
- Public information home
- Page not found
- Help centre
- Careers page
- Vacancy
- Branch page
- Room or stay page
- Property page
- Course page
- Timetable page
- Donation page
- Comparison page
How it is found
In a wireframe: A grid of three or more columns on desktop holding three or more items built alike (cards, or pictures not tucked inside a split).
On a real page: At 1280 px, three or more pictures or headings of about the same width and height on one row.