All articles
4 min read#layout#structure#design

A grid of cards or a list of rows

Two layouts, and the choice is not about taste. It is about whether your links are recognised by their pictures or read by their words.

What a grid does well

A grid turns a page into a catalogue. Six tiles with pictures read as a set, and the eye moves across and down rather than crawling along a single column. That suits anything where the image is the label: products, a portfolio, releases with cover art, episodes with stills. The visitor does not read to find out what an item is. They see it.

A grid also echoes the place most visitors have just come from. If your profile is a wall of squares, a page of squares beneath it feels like a continuation rather than a separate document. That is a real advantage, and it is the main reason a grid can be right even when the number of links is small.

What a grid does badly

The same qualities turn into problems the moment the content stops being visual. Three failures show up again and again.

  • Long labels. A tile is a small box, so a title written as a sentence either truncates or shrinks until it has to be squinted at.
  • A link with no image. Among tiles that show something, a text-only tile reads as a mystery: a blank card to decode rather than recognise.
  • Too many tiles. Twelve of them stop being items and become a pattern. Nothing is first, nothing is emphasised, the page reads as wallpaper.

None of this is solved by finding better pictures for some of the tiles. A grid is only as good as its weakest cell, because a set with one blank in it sends the eye straight to the blank.

A list is faster when every item is a sentence

If your links need words — an offer with a condition attached, an article with a real title, a form that has to say what it is for — a list wins without much argument. A row is as wide as the screen, so a long label fits, wraps and stays readable. Rows also carry an unambiguous order: first is first, and the visitor reads downward without deciding where to look next.

A list is duller to look at, and that is frequently the point. Scanning ten sentences arranged as rows takes one pass. Scanning the same ten arranged as tiles takes several, because the eye keeps going back to compare one box with another.

The mixed page usually wins

The better page often uses both ideas at once: one large featured card at the top for the thing that matters this month, plain rows underneath for everything else. The card takes the image and the emphasis, the rows take the words and the order. On a narrow screen this behaves best of all, since a grid becomes two cramped columns while rows stay full width and thumb-sized. The layout switch applies to the whole page, so this is a decision about the majority of your links rather than about each one separately.

A grid of cardsA list of rows
What carries the meaningThe pictureThe words
A label of eight wordsTruncates or crowds the tileWraps and stays readable
A link with no imageLooks like a hole in the setLooks like every other row
Reading orderLoose, the eye wandersStrict, top to bottom
Ten itemsStart to read as a patternStill a list, just longer
On a narrow phoneTwo columns, small typeFull width, thumb-sized

The three-second test

Show the page to someone who has not seen it, count three seconds, take the phone away and ask what they remember. With a good grid they name two or three items by their pictures. With a good list they name the first link and roughly what the rest were about. If all they can describe is what the page looked like, the layout is carrying the design instead of the content, and the fix is usually fewer items rather than a different layout.

Read next