Ragged grid: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/ragged-grid.html Core Patterns (https://patternpaste.com/patterns/) Gallery (https://patternpaste.com/patterns/gallery/) Catalogue access Standard # Ragged grid A two-by-two photograph grid in which every frame keeps a different proportion: square, three-by-two, four-by-five and sixteen-by-nine. The columns are equal and the ratios are not, so the inner edges never line up and the bottom edge stays ragged; a tracked label and one short line sit in the largest gap the rag opens. Includes replaceable example images. ## All patterns Search patterns Loading patterns… The signature moment ## Every frame keeps its own proportion 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. Theme handoff ## What comes from where ### Theme and pattern 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). 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 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. ### The signature moment: every frame keeps its own proportion 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. Make it yoursVariations and the edits to make first ### Variations - 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. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits, what it decides 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). Technical notesBlock mechanics, responsive behaviour and constraints ### The alignment, and why it is top 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. ### What a buyer changes first 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 , 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. ### Measured The base and the variation both take every colour and typeface from the theme. Both were rendered, checked in the editor and looked at. ### 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 ## Ragged grid: common questions Does Ragged grid need a plugin? No. It is built only from core WordPress blocks (column, columns, group, image and paragraph), so it pastes into the block editor with nothing to install. Will Ragged grid match my theme? Yes. It names no colour or font of its own: every colour, size and space is a preset from your theme, so it takes your theme’s palette and type when pasted. How many variations does Ragged grid have? 2: Paper rag and Ink rag. 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 Ragged grid free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 4.5KB of core-block markup, 5 blocks (column, columns, group, 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 2 Colour From your theme Type From your theme Motion None Blocks column, columns, group, image, paragraph Presets color 5, spacing 4, font-size 1 WordPress 7.0+ Continue exploring ## Next in Gallery Explore all 30 Gallery patterns (https://patternpaste.com/patterns/gallery/) Shot in Twenty Twenty-Five Gallery No plugin needed ### Quote gallery A display-size quotation held between two portrait frames. Gallery Preview pattern (https://patternpaste.com/pattern/quote-gallery.html) Shot in Twenty Twenty-Five Gallery No plugin needed ### Social scatter A copy column with a label, a large heading, a paragraph and one button beside four photographs in two columns, each column one tall frame and one short one, the second column dropped lower so the cluster reads pinned to a wall rather than laid on a grid. Gallery Preview pattern (https://patternpaste.com/pattern/social-scatter.html) Shot in Twenty Twenty-Five Gallery No plugin needed ### 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. Gallery Preview pattern (https://patternpaste.com/pattern/stagger-pairs.html)