# Lead and rail > One wide 16:9 lead frame with a vertical rail of three square thumbnails beside it, tuned so the rail finishes level with the bottom of the lead, and a two-part caption row under the pair. Includes replaceable example images. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/lead-and-rail.html Section: Gallery Access: Free, and free to keep. Needs: Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type. Blocks: column, columns, group, image, paragraph Keywords: gallery, lead image, thumbnails, rail, portfolio, caption, four up ## Variations (2) ### Lead left (the default) Identical markup in every theme. The 16:9 lead takes 85% of the row and the rail of three squares takes 15%, so the three thumbnails and their two gaps finish level with the bottom of the lead. The caption row below carries a tracked label on the left and one line on the right. On a phone the rail drops under the lead as three full-width squares. ### Rail left Identical markup in every theme. The same four frames mirrored: the rail of three squares moves to the left and the lead to the right, and the caption row's two halves swap with them, so the tracked label stays on the lead's side of the row. Same proportions, same colours; only the composition turns around. --- ## The signature moment: one lead against three, and the rail is locked to it The three squares and their two gaps are tuned to finish flush with the bottom of the lead, so the pair reads as one rectangle divided rather than a big image with thumbnails parked next to it. Three numbers make that true, and the arithmetic is worth stating because it is the whole design: - the columns gap is `1.5rem` (24px), so at the 1240px measure the two columns share 1216px; - the rail column is `15%` and the lead `85%`, which is 182.4px and 1033.6px after core's flex shrink redistributes the gap (a column with a `width` becomes `flex-basis` with `flex-grow: 0`, and shrink is weighted by basis, so the 85/15 ratio survives the gap exactly); - the lead at 16:9 is therefore 581.4px tall; three squares are 547.2px, which leaves 34.2px for the two gaps, so the rail's `blockGap` is `clamp(0.5rem, 1.2vw, 1.0625rem)` and lands on 16.8px at the 1400px viewport this is authored for. That is 580.8px of rail against 581.4px of lead: half a pixel out at the authored width. The `1.2vw` middle rung is not decoration; the ideal gap is 1.4% of the row's width, so a gap in `vw` tracks the shrinking row instead of drifting away from it. The clamp's `1.0625rem` cap is exactly the ideal figure once the 1240px `contentSize` stops the row growing. The rail is narrow because the arithmetic demands it and not because a thin column looked nice. At 1:1, three stacked squares are three times the rail's width tall, and a 16:9 lead is only nine sixteenths of its own; so a rail wider than about 16% of the row cannot finish level with the lead however small the gap between the squares is made. A 28% rail would overhang it by more than the lead is tall. **Be clear about what is exact and what is close.** The flush finish is exact at the authored proportions, and stays inside a couple of pixels from the stacking point up to the measure's cap because both sides of the equation are proportions of the same row. It is approximate rather than exact once a theme's own scale moves the numbers: the outer padding, the 1240px measure and the gutters are all the theme's or ours to change, and any of them shifts the row's width slightly out of step with a `vw` gap. The gap between the three squares is stated as a length here rather than as `var:preset|spacing|NN` for exactly that reason: a spacing preset is a different size in Twenty Twenty-Four than in Twenty Twenty-Five, and a rail built on one would overhang the lead in the other and nothing would warn you. One case is worth naming: a theme that never opts into `spacing.blockGap` gets no generated gap rule at all, so the three squares meet edge to edge and the rail finishes about 34px short of the lead. The composition still reads; the lock does not, and it is the absent gap that took it away rather than the markup. **It survives colourlessness because it is entirely proportion.** Nothing in the signature is a colour, a weight or a face: it is 85/15, 16:9, 1:1 and a gap. In a theme with no presets at all it is the same composition, which is the opposite of a device that needs a tint to be visible. **At 390 the composition survives as its own hierarchy.** Core stacks `core/columns` below 782px and gives every column `flex-basis: 100% !important`, so the lead becomes a full-width 16:9 frame and the rail becomes three full-width squares under it, still in the reading order lead-then-rail. The flush finish is gone, because there is nothing left to be flush with, but the idea it exists to state, one frame that carries the room and three that answer it, is if anything louder: one wide frame, then three tall ones. The caption row's two halves wrap onto two lines and stay in order. ## What it inherits, what it decides Inherits: every colour (the band is a `base` chain, its type and both caption lines a `contrast` chain, the hairline `currentColor`, which cannot blank and follows the theme's text wherever the theme puts it), the typeface, and the outer spacing scale (`spacing|70` above and below, `spacing|30` between the frames and the caption row and again above the caption text, `spacing|20` between the caption's two lines when they wrap). Decides: the 85/15 split, the 16:9 and 1:1 ratios, the two gaps that lock them together, the 1240px measure and the `clamp(1.25rem, 4vw, 4rem)` gutters, the 1px `currentColor` rule under the pair, and the type proportion (a 13px tracked caps label at `0.22em`, one 15px to 17px line at 1.55). All four images use `scale: "cover"`, so whatever the buyer uploads is cropped to the ratio the composition needs rather than resizing it. ## The rule this pattern follows **Type never sits on a photograph.** Nothing here is set over an image: both caption lines are on the band's own `base` ground with a `contrast` chain for the type, below the frames rather than on them. A buyer's photographs can be any luminance at all and the two lines are measured as an ordinary guaranteed pair. ## What a buyer changes first The photographs. All four image blocks include example photographs; choose Replace to select an image, and the crop is already set. Choose the lead for a wide subject and the three rail frames for details of it; the rail is about 180px wide at the authored measure, so a face or a texture reads there and a landscape does not. The label is second. It is set in caps at `0.22em` and reads best under about 26 characters; the line opposite it is one sentence and should not wrap at the desktop measure. If the two need more room than the row has, they wrap into two lines rather than shrinking, because the flex row is `flexWrap: "wrap"`. To change the split, change three numbers together or the rail stops being locked: the two column widths, and the rail's `blockGap`. The relation is `3 x rail% + 2 gaps = 9/16 x lead%` of the row. ## Variations - **Rail left**: the same four frames mirrored. The rail column comes first at 15% and the lead second at 85%, and the caption row's two paragraphs swap so the tracked label stays on the lead's side. Every proportion, colour and string is otherwise identical to the base, which is the point: it is a composition variation on one axis, and it exists because a page that already leads left elsewhere wants the weight on the other side. At 390 the two are different patterns in one respect worth knowing: the mirrored file stacks rail-then-lead, so the three squares come first and the wide frame follows. ## Included images 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](/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment.