Ragged grid

Four core/image frames in a two-by-two grid, built as two core/columns rows of two equal columns. The columns are the same width in both rows; the four frames are not the same shape. One is square, one is 3/2, one is 4/5 and one is 16/9, each with scale: cover, so the buyer's photograph is cropped to the proportion the design asks for and nothing is cropped to match anything else. In the largest piece of white the mismatch leaves, a tracked caps label and one short line.

A grid normally crops everything to one ratio, because a flush edge is the easiest thing a grid can promise. This one refuses. The widths are equal and the heights are not, so the inner edges of each row do not line up and the grid's bottom edge is ragged.

Why that is intent and not accident. Three things say so, and all three are structural.

First, the rag only ever falls on one side. In both rows the taller frame is on the left and the shorter on the right, so every gap the mismatch opens is in the right-hand column. A rag that alternated sides would read as four images dropped into a grid; a rag that always falls the same way reads as a decision.

Second, the rag descends. At a 1240px measure each column is about 606px, so the frames are roughly 606px (1), 404px (3/2), 757px (4/5) and 341px (16/9). The top row leaves about 200px of white under its right frame; the bottom row leaves about 415px. The deeper gap is the lower one, so the eye reads the raggedness as falling away from the top-left corner rather than as noise.

Third, the type occupies the largest gap the rag creates, and only that one. The shortest frame of the four (16/9) is placed beside the tallest (4/5), which is what makes the bottom-right gap the deepest one; the label and the line sit in it, in the same column, immediately under the frame. The top-right gap is left empty on purpose: one gap filled and one gap open is the difference between a composition and a caption.

Why it survives colourlessness. The device is made entirely of proportion. There is no wash, no border, no rule and no accent anywhere in the pattern; the only colours are the band's ground and its type, and both are chains. Take every colour away and the four ratios are still four ratios, so the section reads identically in a theme with a full palette and in a theme with none. That is also why the variation can invert the whole band without touching a single frame.

What happens at 390px. Core stacks core/columns below 782px, so the two rows become four full-width frames in a single vertical run: square, then wide, then tall, then widest. The side-by-side mismatch is gone, because there is no side. What survives is the thing worth keeping: the rhythm of changing proportion down the page, a square giving way to a letterbox giving way to a portrait. On a phone the pattern stops being a ragged grid and becomes a run of shapes, which is the same idea read one frame at a time. The label and line stay attached to the 16/9 frame they belong to, because they live in that column rather than in the band.

• Ink rag: the band inverts. A contrast chain becomes the ground and a base chain the type, on the band and on both paragraphs, which state their colour explicitly rather than inheriting it. The four frames, their ratios and their order are identical to the base; only the colour relationship changes, so the rag reads as white cut out of ink. One axis moves and nothing else does, which is what makes it a fair comparison.

Inherits: every colour (the band is a base chain, its type a contrast chain, and there is nothing else to colour), the typeface, and the spacing scale (spacing|70 above and below the band, spacing|50 between the two rows, spacing|40 between stacked frames and above the type, spacing|20 between the label and the line).

Decides: the four ratios and their order, the equal column widths, the top alignment that sends the rag downward, the 1240px measure, the clamp gutters, the clamp(1rem, 2vw, 2rem) column gap, the 22rem measure the type is held to by a nested constrained group with justifyContent: left, and the proportion of the type (a 13px to 14px tracked label, a 15px to 17px line at 1.5).

Both core/columns blocks carry verticalAlignment: "top", written on the columns block AND on each core/column, because core's own align-items: normal !important overrides the columns-level class on the front end and the per-column class is the one that acts. Bottom alignment would have flushed the frames' bottom edges and pushed the mismatch upward into the row's top edge, which reads as frames failing to reach the top of their cells. Top alignment sends the raggedness downward, where it reads as the grid ending unevenly. That is the whole argument for the pattern, so the alignment is not a preference.

The photographs. All four image blocks include example photographs; choose Replace to select an image from your media library, and the crop is already set for you by aspectRatio and scale: cover. Choose per shape rather than per subject: the square wants something centred, the 4/5 wants a standing figure, the 16/9 wants a horizon.

The ratios are the second thing, and they are the thing to change carefully. They can be edited in the block's Aspect Ratio control, but every ratio lives twice, in the block's settings and in the style="aspect-ratio:..." on the <img>, so change them in the editor and let WordPress write both. Keep all four different: two frames at the same ratio in the same row flushes an edge and the pattern quietly becomes an ordinary grid.

The label reads best under 30 characters, and the line should be short enough to sit on one or two lines at 22rem so the white around it stays white.

The base and the variation both take every colour and typeface from the theme. Both were rendered, checked in the editor and looked at.

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.