# 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. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/ragged-grid.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, grid, aspect ratio, proportion, ragged, photo, four up ## Variations (2) ### Paper rag (the default) Identical markup in every theme. Your base colour as the ground and your contrast as the type. Four frames at four proportions, top-aligned in each row, so the grid's right-hand and bottom edges go ragged on purpose; the label and line fill the deepest gap. On a phone the columns stack and the four shapes become a vertical run. ### Ink rag Identical markup in every theme. The band inverts: your contrast colour as the ground, your base as the type. The four frames, their proportions and their order are unchanged, so the rag reads as white cut out of ink instead of ink laid on paper. --- ## 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. ## 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 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). ## 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. ## 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. ## 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](/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment.