Frame quartet

Four square photographs in a two-by-two grid, each one inset inside its own ruled plate. A tracked label and one short line sit above them on a 34rem measure. Every photograph is matted: a 1px hairline runs all four sides of the plate and a generous band of the band's own ground stands between that rule and the picture, with a 13px uppercase caption below the image and inside the same plate. Nothing sits on a photograph. Take frame-sextet where the same mat has to hold six prints in two rows of three.

Every other gallery in the library runs its photographs to the edge of their cell; here each one is inset inside a ruled plate with real white space around it, so the section reads as four framed prints on a wall rather than four tiles in a grid. The mat is made of two things and only two: a style.border on each plate group (currentColor, solid, 1px, written in both the block's settings and the rendered style= in the order the style engine emits them, border-color then border-style then border-width) and var:preset|spacing|40 of padding on all four sides.

It survives colourlessness because the frame is a currentColor hairline. currentColor cannot blank, needs no chain and follows whatever text colour the theme puts on the band, so the rule is always exactly as dark as the caption beside it: in a light theme it is a fine ink line on paper, in a dark one a fine pale line on ink, and in both it is the same idea. The white space inside it is the band's own ground, which is a base chain, so the mat is never painted and never needs to be.

It survives 390px because the mat is padding, not layout. Below 782px core stacks the two core/columns rows, each column becomes its own flex line, and the four plates become a vertical run of four. Each one keeps its padding and its rule at full strength, so a phone shows the same framed print at a different rhythm: one wide mat after another down the page, instead of two beside two. Nothing is dropped and nothing collapses; only the number of prints per line changes.

• Filled mats (quartet-filled): the mat becomes solid instead of ruled. Each plate takes a contrast chain as its ground and a base chain as its caption type, and the border is dropped entirely. The four frames, the spacing|40 mat, the square crops and the grid are identical; only the mat's treatment changes, which is one axis. The photographs now sit on dark card, which suits a set that is mostly light, and the section reads heavier without reading louder.

• Cobalt and chalk (cobalt-and-chalk). States a chalk ground, cobalt frame rules and Avenir Next for the opening and print captions.

Inherits: every colour (the band is a base chain with contrast type, the captions are contrast chains, the frame is currentColor), the typeface, and the spacing scale (spacing|80 above and below the band, spacing|60 between the intro and the grid, spacing|50 as the grid's gutter in both directions, spacing|40 as the mat, spacing|30 between a photograph and its caption).

Decides: the mat itself, the 1:1 crop on all four images (aspectRatio: "1" with "scale":"cover", so whatever the buyer uploads is cropped square rather than letting four different shapes ruin the grid), the 1240px measure and the clamp(1.25rem, 4vw, 4rem) gutters that make it a full-bleed section rather than a cramped column, the 34rem intro measure held by a nested constrained group, and the type proportion: a 13px tracked caption against a 15px to 17px lede at 1.55.

Every heading-weight line in this pattern is a paragraph, and every one of them states its own text colour, so no theme's element style can repaint it to match its ground.

The photographs. All four image blocks include example photographs; choose Replace to select an image from your media library, and the square crop is already set. The captions are the second thing. They are set in caps at 13px with 0.2em tracking, which is a glanced label rather than a read line, so keep each one under about 30 characters or it stops being incidental type.

If the mat feels too wide or too tight for the pictures, change the plate group's padding preset: spacing|30 for a narrower mat, spacing|50 for a gallery wall. The rule is currentColor, so it needs no change in any theme; if you want it heavier, raise the width in two places, in the block's settings and in the style=, or the block stops matching itself.

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.