Gallery spread: WordPress Block Pattern, Pattern Paste

Canonical: https://patternpaste.com/pattern/gallery-spread.html

Core Patterns (https://patternpaste.com/patterns/) Gallery (https://patternpaste.com/patterns/gallery/)

Catalogue access Standard

# 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.

## All patterns

Search patterns

Loading patterns…

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.

Theme handoff

## What comes from where

### Theme and pattern

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 <style> and no core/html, and embeds no plugin block.

Both image blocks include example photographs, with the crop and layout already set. Choose Replace on either image to select your own file. No type sits on a photograph anywhere in this pattern: the plate line under the small frame is on the band's own ground, beneath the image.

Full pattern notes

## Why it works, and how it is built

Open a topic for the complete design reasoning, editing guidance and implementation notes.

Design rationaleComposition, intent and nearest alternatives

### Overview

An editorial spread built from two photographs and one column of type. A tall 2/3 portrait frame runs off the left edge of the viewport; beside it a constrained column holds a headline, a lede at a real measure and a small 3/2 frame with a tracked caps plate line under it. Above the pair a single eyebrow sits inside the normal measure, and below it a currentColor hairline closes the section with two short meta lines, so the band has a stated bottom edge and the stage shows where the section ends.

Everything except the tall frame stays inside the 1240px measure and the clamp gutters. The tall frame is the only thing in the section that breaks out, and it breaks out on one side.

### 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.

Make it yoursVariations and the edits to make first

### Variations

Mirrored spread (spread-mirror). The bleed moves to the right edge and the type column to the left. Same two frames, same proportions, same colours, same copy: one axis, composition. The two padding expressions on the spread row swap sides and the two core/column blocks swap order, which is the whole of the change, and it is worth knowing that it is: the bleed is stated as a padding rather than as an offset, so mirroring it is a swap and not a re-authoring. The type column then starts on the measure's left edge, so it starts on the same line the eyebrow above it starts on, exactly as the base's column ends on the line the measure ends on. At 781px and below the two variations are identical, because both release the bleed.

Terracotta and linen (terracotta-and-linen). States a linen ground, terracotta editorial marks and Georgia serif heading and captions.

Theme behaviourInheritance, fixed decisions and contrast

### 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 <style> and no core/html, and embeds no plugin block.

Both image blocks include example photographs, with the crop and layout already set. Choose Replace on either image to select your own file. No type sits on a photograph anywhere in this pattern: the plate line under the small frame is on the band's own ground, beneath the image.

Technical notesBlock mechanics, responsive behaviour and constraints

### 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:

- 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.

- 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.

- 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 a buyer changes first

- The two photographs. Click each frame and pick from the media library. The crops hold whatever is uploaded, so a landscape file in the tall frame still reads as a portrait.

- The headline and the lede. The lede is set in a 34rem measure on purpose; about 55 to 70 characters a line is what the design is tuned for, and a much longer lede will out-run the tall frame's height.

- The 42/58 split. Both column widths are percentages on the core/column blocks. Widening the frame past about 50% makes the portrait taller than the whole type column, and the spread stops being a spread.

- The eyebrow and the two closing lines, which are tracked caps and should stay short; they are the only places in the section where a bare font-size would be defensible, and even they state a clamp().

### 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 (https://patternpaste.com/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment.

Questions

## Gallery spread: common questions

Does Gallery spread need a plugin?

No. It is built only from core WordPress blocks (column, columns, group, heading, image and paragraph), so it pastes into the block editor with nothing to install.

Will Gallery spread match my theme?

Choose by variation. Left bleed and Mirrored spread take your theme’s palette; Crumb and Terracotta and linen bring its own colours.

How many variations does Gallery spread have?

4: Left bleed, Crumb, Mirrored spread and Terracotta and linen. Each is its own markup; choose one in the toolbar above the preview before you copy.

Can I use my own images?

Yes. Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library.

Is Gallery spread free?

It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one.

7.1KB of core-block markup, 6 blocks (column, columns, group, heading, image, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme.

Subscribe to copy it, £49 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days.

Back to Core Patterns (https://patternpaste.com/patterns/)

Catalogue access

### £49 a year

All patterns, variations and theme downloads.

What you copy is yours forever. Not for you? We refund within 14 days.

Subscribe, £49 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/)

Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country.

#### Pair with

Hero Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html)Editorial Article footer The close of an article: a portrait of the author beside their name, the biography under both inside a currentColor slip held to the middle half of the measure, and the previous and the next post hanging off the two outer edges so the section reads as a doorway rather than a footer. The name, the biography and the two neighbours are dynamic core blocks, so they are the post's own and the preview here is sample data; the portrait is an ordinary image block you swap for your author's own. The previous and next links only resolve on a single post template, which is where this pattern belongs. (https://patternpaste.com/pattern/article-footer.html)Contact Contact cover ledger A full-bleed contact cover: a display heading in the top left, and a ruled ledger of address, hours, phone and email in the far lower-right corner, label left and value right between hairline rules, with the photograph running between them. A heavy veil of your theme's contrast colour keeps every line legible whatever photograph you choose. The ledger drops under the heading on a phone. Includes a replaceable example photograph. States no colour and no font of its own. Ships with a short hand-off row on your theme's paper below it. (https://patternpaste.com/pattern/contact-cover-ledger.html)

#### Before you paste

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. How we test patterns (https://patternpaste.com/how-we-test/)

Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Video variations need your own clip. Image credits (https://patternpaste.com/image-credits/).

## Specifications

Section

Gallery

Access

Subscription

Plugin

None, core blocks only

Variations

4

Colour

From your theme or its own palette

Type

From your theme or its own type

Motion

None

Blocks

column, columns, group, heading, image, paragraph

Presets

color 5, spacing 6, font-size 2

WordPress

7.0+

Continue exploring

## Next in Gallery

Explore all 30 Gallery patterns (https://patternpaste.com/patterns/gallery/)Also in Editorial (https://patternpaste.com/patterns/editorial/)

Shot in Twenty Twenty-Five Gallery No plugin needed

### The long way round

Five travel photographs make a still filmstrip with alternating landscape and portrait frames, each with its own caption.

Gallery Preview pattern (https://patternpaste.com/pattern/gallery-long-way-round.html)

Shot in Twenty Twenty-Five Gallery No plugin needed

### Gallery thank-you tile

A thank-you gallery where the words take one photograph's place: a six-cell grid of 4:5 frames with short captions, the second cell an inverted tile of the same size holding a short thank-you heading, three lines and two links, to the full album and to add your own.

Gallery Preview pattern (https://patternpaste.com/pattern/gallery-thank-you-tile.html)

Shot in Twenty Twenty-Five Gallery No plugin needed

### Half and half

A fifty-fifty split in which one frame equals four: a single square on the left and a two-by-two of four squares on the right, at a tight gutter, so the two halves occupy the same rectangle.

Gallery Preview pattern (https://patternpaste.com/pattern/half-and-half.html)