Card grids nearly always look good in a mockup. Lay out six, give each a well-judged title and a well-chosen picture, and the screen feels orderly. The trouble starts when forty real items arrive.
They tend to break in a fixed order: aspect ratio, then card height, then visual variety.
Aspect ratio is the first rule and the first to break
Thumbnails at differing ratios destroy a card grid immediately, because the repeating shape is precisely what tells the reader these are instances of one unit. One odd ratio makes that card stick out; several turn the grid into a jumble.
The ratio usually drifts from the content side: editors upload landscape and portrait shots interchangeably, some posts have no featured image, imported items arrive at their own dimensions. Which is why ratio must be enforced by the interface rather than requested from the content. Give the thumbnail slot a fixed ratio and crop to fill, and any original keeps the grid intact.
Decide in advance what happens when there is no image at all. Leaving a gap changes that card’s height; a grey rectangle looks like a hole. Drawing a substitute in code works well here — no files to manage, and you can generate a different picture per item by rule.
Card height is set by the longest item
Cards in a row share a height, so one three-line title makes the entire row three lines tall. Among forty items, one or two will always have a long title.
There are two responses: cap the number of lines and truncate beyond it, or constrain the length itself upstream. Do both. The cap protects the layout; the length rule reduces how often the cap is reached.
The same applies to excerpts. Text pulled automatically from the body varies wildly in length, and an excerpt cut mid-sentence makes the card look unfinished. Writing excerpts deliberately is better where it is feasible; where it is not, normalise the length server-side.
When three cards read as one block
This is the second thing forty cards reveal. Each card is beautifully made to a consistent rule, and yet laid out together three cards of the same family read as a single block and the individual items stop being distinguishable.
The cause is almost always a single axis of variation. Assign one colour per category and every card in a category is identical in colour; put three of them side by side and they merge into one field.
The fix is to multiply the axes. Add a few gradient directions, a few shape positions, a few grid densities and a few motifs alongside the colour, and the combinations multiply rather than add. Four axes with three or four values each give you dozens of outcomes, and neighbouring cards from one category no longer look alike.
One condition matters here: the same item must always produce the same drawing. Pick the combination at random and the artwork changes on every reload, so nobody can remember where anything was. Derive it from something stable, such as the item’s own identifier, and the card looks identical wherever and whenever it is rendered.
Decide column count and page size together
One last detail that looks trivial and shapes the impression considerably: how many cards a page shows. A number that does not divide by the column count leaves gaps in the final row. For a grid that moves between three and two columns, multiples of six are tidy in both.
Featuring one item at a larger size is a common pattern, and worth a condition: do not feature anything in a filtered list. The visitor has just told you what they want; giving prominence to something you chose puts your judgement in front of theirs.
Indexing policy for list and archive screens is covered in the SEO archive, and rules for changing column counts across viewports live in the responsive series. If you would like a live site’s listing screens reviewed, screen diagnostics are part of our optimization program.