Grid columns and spacing

These options appear under Appearance → Customize → Blog only while Display is set to Grid.

Column counts

Three separate settings, one per device.

Each device offers its own range, because the narrower the screen the fewer counts make sense — four cards across a phone is unreadable.

The band in between

Between roughly 822px and 1090px — a small laptop, or a tablet in landscape — the theme thins a wide grid on its own, with no setting behind it. The container there is only about 940px, and the widest counts would leave cards too narrow to read anything in.

• 5 or 6 columns render as 4
• 4 columns render as 3
• 3 columns render as 3

You do not need to plan for this; it happens automatically, and the featured images know about it too, so a card in that band still downloads a file sized for the card rather than for the viewport.

Grid spacing

Blog → Grid spacing. The space between cards.

A scale rather than a number box, because the two are not the same choice: 6rem between cards is generous on a desktop and absurd on a phone, where it would push the second row off the screen. Each step therefore carries its own smaller values down the range.

None butts the cards edge to edge — a mosaic. It works with a square thumbnail ratio and no border; it looks like a mistake with rounded corners.

Choosing a count

• 2 columns — big pictures, the grid still reads as a blog. The default for a reason.
• 3 columns — the standard magazine grid. Wants full width.
• 4 columns — an index. Titles need to be short.
• 5–6 columns — a contact sheet. Only with a square or portrait crop, short titles, and probably no excerpt.

If you go past three columns, check the excerpt length — 20 words is the grid default and even that is a lot in a quarter-width card.

Related

• Thumbnails — the crop, border and radius
• Blog layout — a grid wants Full width