Post grid

A run of writing as three openings across the page: a picture, then the piece it belongs to. It is the grid version of an article list, built to sit in the middle of a page between a features section and a closing ask, and to carry a "latest writing" block on a site that has one.

These are hand-written entries, not a query loop. There is no core/query, no core/post-template and nothing that reads the database. Every kicker, title and date is a core paragraph or heading you type, so the pattern works on a static page, in a page builder's canvas, and on a site whose posts live somewhere else entirely. If you want the three newest posts to appear by themselves, this is the wrong pattern and a Query Loop is the right one.

Each opening is a mat: the picture is inset from the column's edges, and a 1px hairline is drawn beneath it that runs wider than the picture, out to the full width of the column. The kicker, the title and the date sit under that rule, inset by the same margin as the image above it.

That one rule does the whole job. It ties the image to the type as a single object, so three openings read as three pieces rather than as a row of pictures with captions underneath. And because it runs past the image on both sides, it is a structural mark rather than a caption divider: at a glance you see three hard horizontal strokes across the section, and the pictures floating above them.

The rule is currentColor. It cannot resolve to nothing, and it follows your text colour wherever your theme puts it, which is why the whole device survives the inversion in the variation without a single colour being restated.

1. The three titles. They are built for six to ten words breaking over two or three lines. A one-line title leaves the mat looking short next to its neighbours.
2. The images. Select each frame and point it at your media library. Keep the 3:2 crop unless you change all three.
3. The kickers. They are a category, a series name or a section of the site. Delete the paragraph if you do not have one; the rule still ties the picture to the title.
4. The dates. Type them in the format your site uses. They are static text, so nothing reformats them for you.
5. The header. The tracked label and the one-line lede sit on a 34rem measure at the left. Delete either and the grid still reads.
6. The count. Three openings is the composition, and the grid means you are not adding a column when you add one: paste a fourth card into the same group and the row becomes four across where there is room for four and two where there is not. What you should not do is lower the 18rem minimum to force more across, because that is the number keeping a title out of a ribbon.

• Night openings. The colour axis and nothing else: the band inverts to your contrast ground with your base on it. The mat rules are currentColor, so they flip with the type and no rule is restated anywhere in the file. Both slugs exist in every stock block theme, so the inversion arrives everywhere.

• The typeface. The pattern states no font family anywhere. Kickers, titles and dates are all set in your face; the design is in the tracking and the scale, not in the family.
• Your colours. The ground asks for base and the type asks for contrast, the two slugs every stock block theme defines, each ending on a colour WordPress itself guarantees. Nothing in the section can blank.
• Your spacing scale. The band's padding, the gaps between openings and the mat's inset are all spacing presets, so a theme with a generous scale gets a roomier grid without you editing anything.
• Your images. The three image blocks include example photographs, with the crop already set. Choose Replace on any image to select your own file.

• Full bleed with its own measure. The section spans the viewport and holds its content to 1240px, so it is a band on a page rather than another column of body text, and it does not depend on the section above or below it for air.
• A grid that reflows, not three columns that do not. The openings sit in a core/group with a grid layout and an 18rem minimum column, so the row is three across on a desktop, two on a tablet and one on a phone, and it changes at the width the cards run out of room rather than at the single 782px line core draws for a Columns block. It was three columns until 2026-08-22, and at 820 that put each title in a 208px column: "The shed that taught us to measure twice" set 13 characters per line over five lines in Twenty Twenty-Four, which is a ribbon and not a headline. Nothing was hidden and no type was shrunk; the row simply stops insisting on three.
• The 3:2 crop, and scale: cover. Whatever you upload is cropped to the same proportion in all three openings, so the row stays level even when your three photographs do not match.
• The mat inset, and the one thing about it that is not your theme's. The image is padded away from the column edges and the rule is not. That asymmetry is the pattern; remove it and you have a caption. The side inset is a clamp() from 12px to 24px rather than a spacing preset, and that is deliberate: a preset is whatever the buyer's theme says it is, and in Twenty Twenty-Four spacing|40 is wide enough to take 108px out of a 341px column and leave the title breaking at 19 characters even on a desktop. The top and bottom of the mat are still presets, so the section still breathes on your scale; only the two edges that decide how wide a title can be are bounded.
• The title ramp. Titles are a clamp() set tight (line-height 1.15, slightly negative tracking) so a three-line title still reads as one object. Titles carry their own explicit text colour rather than inheriting it, because a theme's heading element style beats a colour set on the wrapping group.
• The kicker and date scale. Both are small, uppercase and widely tracked, and deliberately far from the title in size: the scale gap is what makes the title read as the thing to click.

• Core blocks only: group, paragraph, heading, image. The row of openings is a group with a grid layout, so there is no Columns block in the pattern at all. No plugin, no script, nothing to keep updated.
• Every colour is a fallback chain ending on a colour WordPress guarantees, and no rule, border or divider states a colour at all: they are all currentColor.
• Text never sits on a photograph here. The pictures carry atmosphere and the type sits on your page ground beneath them, so no image you choose can make a title hard to read.

The copied markup includes WordPress Photo Directory example photographs. The public image URLs keep the examples visible after pasting. Select an image or cover and choose Replace to use your own Media Library files. See image credits for the sources and licenses. Pasting an image URL does not import a Media Library attachment.