# Gallery spread > An editorial spread with a one-sided bleed: a tall 2:3 portrait frame runs off the left edge of the viewport while the type column beside it stops flush with the 1240px measure, and a small 3:2 frame sits under the lede. Example images are included with their crops set. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/gallery-spread.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, heading, image, paragraph Keywords: gallery, spread, editorial, bleed, portrait, asymmetric, two frames ## Variations (4) ### Left bleed (the default) Identical markup in every theme. The tall frame escapes on the left and the headline, lede and small frame hold the right-hand column, ending exactly on the measure. Below 782px the columns stack and the bleed is released, so both frames sit inside the same gutter as the type. ### Crumb This variation states its own colours and states its own type: identical in every theme. The Crumb café set: oat ground, espresso ink, two cappuccinos bleeding off the page beside a croissant plate, soft corners, terracotta labels, Georgia over Helvetica. ### Mirrored spread Identical markup in every theme. The same two frames and the same proportions, flipped: the tall frame bleeds off the right edge and the type column takes the left, starting on the measure so it lines up with the eyebrow above it. Composition only; nothing else changes. ### Terracotta and linen This variation states its own colours and states its own type: identical in every theme. States a linen ground, terracotta editorial marks and Georgia serif heading and captions. --- ## The signature moment: the frame escapes on one side only Every other gallery in this library is either fully constrained (`contact-sheet`, `ragged-grid`, `frame-quartet`) or fully full-bleed (`frieze-band`, where the run touches both edges). This one is asymmetric. The portrait passes the measure on the left and keeps going to the viewport edge, while the type column stops exactly on the measure's right edge, on the same line the eyebrow above it and the hairline below it end on. The result reads as a page turning off the edge of the sheet while the type stays on the sheet. It survives colourlessness because it is made of **measure and bleed** and of nothing else. There is no rule, tint, shadow or accent doing the work: the whole device is two numbers, the width the type is allowed and the width the picture is allowed, so it is identical in a theme with twelve palette slugs and in one with none. The only colours in the file are a `base` ground, a `contrast` type chain and a `currentColor` hairline. It survives a serif theme and a sans one for the same reason. The headline is proportion rather than voice: `clamp(2rem, 3.6vw, 3.25rem)` at `-0.028em` in a 34rem measure, which sets two or three lines in Cardo and in Manrope alike. ## How the one-sided bleed is built, and what fails instead The trap first, because it is the obvious approach and this catalogue has already paid for it. **`padding-right: max(...)` on a direct child of a constrained band does not hold a measure.** The block is `content-box`, so the padding sits outside the layout's `max-width`; the block grows to the band's full width and the layout then centres it, which put `content-columns`'s left edge 144px out of line with its neighbours at 1400. Nothing in the section would have looked bled; it would have looked misaligned. What this pattern uses is the shape `frieze-band` proved, with one padding instead of none: 1. The outer `align: full` group carries **no horizontal padding at all** (`left: "0"`, `right: "0"`) and a constrained inner at `1240px`. So the band itself reaches both viewport edges and the measure is applied per child. 2. The eyebrow and the closing hairline row are each wrapped in their **own** nested constrained group that carries the clamp gutters `clamp(1.25rem, 4vw, 4rem)`. They are the "normal" content. 3. The spread itself is a child with `align: full` and `{"layout":{"type":"default"}}`, so it spans the whole viewport, and it is **not** the constrained inner: its children are flow children that fill its content box and nothing centres them. That is the difference that makes asymmetric padding sound here and unsound in the trap above. Its `padding-left` is zero and its `padding-right` is `max(clamp(1.25rem, 4vw, 4rem), calc((100% - 1240px) / 2))`. That right-hand expression is the whole alignment. Above 1240px + gutters the `calc` half wins and reproduces exactly what a constrained layout does to centre a 1240px measure; below it the clamp half wins and reproduces the gutter. Both regimes were measured rather than reasoned about: at 1400 the type column ends at 1320px and the measure's right edge is `(1400 + 1240) / 2` = 1320px; at 1280, where the measure is gutter-limited rather than capped, the column ends at 1228.81px and the measure ends at 1228.81px. A negative left margin on the row would have been the other sound answer (and the brief allows it on a non-first child, which this row is). It was not used because a negative margin has to name a length that matches the gutter, so the gutter would then live in two places and drift apart on the day one of them is changed. Here the gutter is stated once and the bleed is the absence of it. ## What happens at 390 Core stacks `core/columns` at 781px and below. Stacked, a one-sided bleed is wrong twice over: the tall frame would touch one edge and stop short of the other, which reads as a mistake rather than a device, and the type under it would sit hard against the same edge with nothing holding it off the glass. So the bleed is **released** at exactly the width the columns stack, by the row's `padding-left`: ``` max(0rem, min(clamp(1.25rem, 4vw, 4rem), (782px - 100%) * 1000)) ``` Above 782px the second term is hugely negative, `min` takes it and `max` floors it at zero, so the frame bleeds. At 781px and below the second term is hugely positive, `min` takes the clamp, and the frame is inset by the same gutter as everything else. Measured at nine widths: `padding-left` is 0 at 782 and 31.23px at 781, and 20px at 390, where the row's right padding is also 20px. So the phone gets a symmetrical, ordinary column of two frames and a column of type, and the signature is simply absent rather than half-present. This is deliberate: a device that only works in one regime should stop rather than degrade into something that looks unfinished. The section still reads as designed on a phone, because what is left is the proportional pair (a tall portrait, then a headline, a lede and a wide small frame) and the closing hairline. It is quieter, and it is not broken. ## What it inherits, what it decides **Inherits:** the typeface, every colour, the spacing scale (presets 20 to 70), and the buyer's own `base`/`contrast` resolution. The ground is a `base` chain and every piece of type states a `contrast` chain of its own, including the headline, because a theme's heading element style beats an inherited group colour. The hairline is `currentColor` and cannot blank. **Decides:** the measure (1240px band, 34rem type column, 42/58 split), the bleed and where it is released, the two crops (`2/3` and `3/2`, both `scale: cover`), the type ramp and its tracking, and the hairline that closes the band. It states no font family, carries no script, no `