# Stagger pairs > Three stacked rows of two photograph frames each, split roughly 64/36, with the wide frame changing sides from row to row and a hairline ruling the joins. A small tracked label sits above the narrow frame in every row, so the labels alternate too. Includes replaceable example images. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/stagger-pairs.html Section: Gallery Access: Included in Pattern Paste access. 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, pairs, rows, asymmetric, stagger, alternating, photo ## Variations (2) ### Wide left first (the default) Identical markup in every theme. The first row is wide on the left, the second wide on the right, the third wide on the left again, so the asymmetry throws the eye left, right, left as it goes down. Six frames at 3:2, ruled apart by a hairline in your theme's text colour. On a phone the columns stack full width and the alternation goes with them; the labels, the rules and the six frames remain. ### Reversed stagger Identical markup in every theme. The same three rows starting on the other side: wide right, wide left, wide right, with the labels following the narrow column. Composition only; the widths, the frames and the colours are identical to the base. Use it when the section above this one already leans left. --- ## The signature moment: the asymmetry changes sides down the page A single unequal split is a layout. Three of them alternating is a rhythm. The eye is thrown left, then right, then left as it descends, and the section reads as a decision rather than as a grid that happened to come out uneven. Nothing else in the section is doing any work: there is no wash, no tint, no numeral and no offset, only two column widths and the order they are used in. That is exactly why it survives colourlessness. The device is made of `flex-basis: 64%` and `flex-basis: 36%` and of which one comes first in each row. Take every colour away and the alternation is unchanged, because a percentage cannot be recoloured. The only painted marks in the section are the band's ground (a `base` chain), the type (a `contrast` chain) and the two hairlines, which are `currentColor` and therefore exactly as dark as the label beside them in any theme, light or dark, serif or sans. The alternation also gives the emptiness a rhythm. Both frames in a row are 3:2, so at the 1240px measure the wide one is about 513px tall and the narrow one about 289px; with the columns top-aligned, the narrow column runs out of content roughly 180px above the next hairline. That leftover air falls on the right in row one, on the left in row two and on the right again in row three, so the void alternates with the frames instead of accumulating on one side. **What happens at 390px, stated plainly: the signature does not survive.** Core stacks `core/columns` below 782px, each column becomes its own flex line at full width, and both frames in a row render the same width. There is no left and no right in a single column, so the alternation is not weakened on a phone, it is gone. What survives is everything else: six frames in the order they were authored, each label still sitting above its own frame, and the two hairlines still ruling the run into three pairs, because the border is on the row GROUP rather than between the columns and so does not stack with them. A phone reads this as a ruled run of six plates. It is a good section on a phone and it is a different one; do not buy it for the phone. ## What it inherits, what it decides Inherits: every colour (the band's ground is a `base` chain, all type and both hairlines follow `contrast` and `currentColor`), the typeface, and the spacing scale (`spacing|70` above and below the band, `spacing|50` between the intro and the first row and on either side of each hairline, `spacing|40` as the stacked row gap, `spacing|30` between a label and its frame). Decides: the 64/36 split and its alternation, the 3:2 crop on all six frames, the 1240px measure and the `clamp(1.25rem, 4vw, 4rem)` gutters, the column gap `clamp(1.25rem, 2.6vw, 2.5rem)`, the top alignment of each pair, and the proportion of the type (a 13px label at `0.22em` tracking, an intro line clamping from 15px to 17px at 1.5). Two mechanics are worth naming. The alignment is set on **each `core/column`** as well as on the `core/columns` block, because core's own `align-items: normal !important` overrides the columns-level class on the front end, as `cover-trio` found too. And the hairlines are group borders rather than `core/separator` blocks, because Twenty Twenty-Four narrows any separator that is not `is-style-wide` to a centred stub. The band's `blockGap` is `0`. The vertical rhythm lives in each row group's own padding instead, so the space above a hairline and the space below it are the same `spacing|50` and the rule sits exactly between the two pairs it separates. The first row has no top border and no top padding, so the run starts at the intro; the last row has no bottom padding, so it stops level with its own frames rather than trailing into the band. ## What a buyer changes first The photographs. **All six frames include example photographs**; choose Replace to select an image from your media library, and the 3:2 crop and `object-fit: cover` are already set for you. Then the three labels. They are set in caps at wide tracking and read best under about 24 characters; a label that wraps to two lines pushes its frame down and softens the row's top edge, which is the one place this composition is fragile. If you want a fourth pair, copy a whole row group and keep the alternation going: a fourth row is wide-right in the base and wide-left in the reversed variation. Copying a row and leaving it on the same side as the one above is the one edit that removes the signature. ## Variations - **Reversed stagger**: the run starts on the other side, so the rows read wide-right, wide-left, wide-right and the labels follow the narrow column down the other edge. Same six frames, same widths, same crops and same colours; the composition is the only thing that changes. It is there because the alternation has a phase as well as a rhythm, and the right phase depends on what sits above the section on the page. ## 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.