Six framed prints

Six square photographs in two rows of three, 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 band of the section's own ground stands between that rule and the picture, with a numeral and a 12px uppercase caption below the image and inside the same plate. The two rows run the full 1240px of the band. Nothing sits on a photograph.

Six pictures in a section is the point at which a gallery stops being a statement and starts being a collection, and a collection wants an order. Every plate here carries a roman numeral before its caption, I to VI, reading left to right and then down, so the wall is a sequence a visitor can refer to rather than six things that happen to be near one another. The numeral is set in the same 12px tracked caps as the caption and separated from it by a middle dot, so it costs one line of type and no decoration at all.

The second half of the signature is that the mat survives being multiplied. Three plates across at 1240px leave each one a little under 400px wide, so the inset comes down to spacing|30 and the caption to 12px while the frame stays a full 1px. The mat is narrower than frame-quartet's and it is still a mat: the photograph is nowhere near the rule, and the white space between them is doing the same job at two thirds the size.

It survives colourlessness because the frame is a currentColor hairline. currentColor cannot blank, needs no chain and no slug a theme might not define, and follows whatever text colour the theme paints the band with, so the rule is always exactly as dark as the caption beside it: a fine ink line on paper in a light theme, a fine pale line on ink in a dark one. The 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. Core stacks a core/columns below 782px, so each of the two rows becomes three flex lines and the six plates become a vertical run of six. Every one keeps its padding, its rule and its numeral at full strength, and only the number of prints per line changes. At 820px the two rows still hold three across, which is where the tighter inset earns itself.

Inherits: every colour (the band is a base chain with contrast type, the captions are role-label chains falling through to contrast, 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|40 between the two rows and as the gutter inside each, spacing|30 as the mat and again between a photograph and its caption).

Decides: the mat itself; the 1:1 crop on all six images (aspectRatio: "1" with "scale":"cover", so whatever the buyer uploads is cropped square rather than letting six different shapes ruin the wall); the 1240px measure and the clamp(1.25rem, 4vw, 4rem) gutters that make this a full-bleed section rather than a cramped column; the 34rem intro measure, held by a nested constrained group rather than a padding-right, which on a direct child of a constrained band gives the right width and the wrong position; and the type proportion, a 12px tracked caption against a 15px to 17px lede at reading size.

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.

1. The photographs. All six image blocks include example photographs; choose Replace to select an image from your media library, and the square crop is already set. They do not have to be shot square, but they should be shot in roughly the same light, because three of them sit side by side with only a mat between them to excuse a mismatch.
2. The captions, and the numerals with them. Each caption is one paragraph in caps at 12px with 0.18em of tracking, which is a glanced label rather than a read line, so keep it under about 24 characters. If you delete a print, renumber the ones after it; the numerals are literal text, which is what lets them be I to VI rather than 1 to 6.
3. The count. A row is one core/columns of three. Delete a column for a row of two, or copy one for a row of four, and drop the mat to spacing|20 if you go to four, because four across at 1240px leaves under 290px a print.
4. The mat. If it feels tight for the pictures, raise the plate group's padding to spacing|40; 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.