Post grid: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/post-grid.html Core Patterns (https://patternpaste.com/patterns/) Blog (https://patternpaste.com/patterns/posts/) Catalogue access Standard # Post grid A run of writing as three openings across: each is a 3:2 image frame inset in its own mat, a hairline drawn beneath it that runs wider than the picture, and under the rule a tracked kicker, a title set tight and a date. Hand-written entries in core blocks, not a query loop, so it works on a static page and every word is yours to edit. The openings sit in a grid with an 18rem minimum column, so the run is three across on a desktop, two on a tablet and one on a phone. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The three titles. They are built for six to ten words breaking over two or three lines. - The images. Select each frame and point it at your media library. - The kickers. They are a category, a series name or a section of the site. - The dates. Type them in the format your site uses. - The header. The tracked label and the one-line lede sit on a 34rem measure at the left. - The count. Three openings is the composition, and the grid means you are not adding a column when you add one: paste a fourth card into the same group and the row becomes four across where there is room for four and two where there is not. The signature moment ## The mat rule tying image to type Each opening is a mat: the picture is inset from the column's edges, and a 1px hairline is drawn beneath it that runs wider than the picture, out to the full width of the column. The kicker, the title and the date sit under that rule, inset by the same margin as the image above it. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your spacing scale. - Your images. ### Set by this pattern - Full bleed with its own measure. - A grid that reflows, not three columns that do not. - The 3:2 crop, and scale: cover. - The mat inset, and the one thing about it that is not your theme's. - The title ramp. - The kicker and date scale. 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 A run of writing as three openings across the page: a picture, then the piece it belongs to. It is the grid version of an article list, built to sit in the middle of a page between a features section and a closing ask, and to carry a "latest writing" block on a site that has one. These are hand-written entries, not a query loop. There is no core/query, no core/post-template and nothing that reads the database. Every kicker, title and date is a core paragraph or heading you type, so the pattern works on a static page, in a page builder's canvas, and on a site whose posts live somewhere else entirely. If you want the three newest posts to appear by themselves, this is the wrong pattern and a Query Loop is the right one. ### The signature moment: the mat rule tying image to type Each opening is a mat: the picture is inset from the column's edges, and a 1px hairline is drawn beneath it that runs wider than the picture, out to the full width of the column. The kicker, the title and the date sit under that rule, inset by the same margin as the image above it. That one rule does the whole job. It ties the image to the type as a single object, so three openings read as three pieces rather than as a row of pictures with captions underneath. And because it runs past the image on both sides, it is a structural mark rather than a caption divider: at a glance you see three hard horizontal strokes across the section, and the pictures floating above them. The rule is currentColor. It cannot resolve to nothing, and it follows your text colour wherever your theme puts it, which is why the whole device survives the inversion in the variation without a single colour being restated. Make it yoursVariations and the edits to make first ### What to change first - The three titles. They are built for six to ten words breaking over two or three lines. A one-line title leaves the mat looking short next to its neighbours. - The images. Select each frame and point it at your media library. Keep the 3:2 crop unless you change all three. - The kickers. They are a category, a series name or a section of the site. Delete the paragraph if you do not have one; the rule still ties the picture to the title. - The dates. Type them in the format your site uses. They are static text, so nothing reformats them for you. - The header. The tracked label and the one-line lede sit on a 34rem measure at the left. Delete either and the grid still reads. - The count. Three openings is the composition, and the grid means you are not adding a column when you add one: paste a fourth card into the same group and the row becomes four across where there is room for four and two where there is not. What you should not do is lower the 18rem minimum to force more across, because that is the number keeping a title out of a ribbon. ### Variations - Night openings. The colour axis and nothing else: the band inverts to your contrast ground with your base on it. The mat rules are currentColor, so they flip with the type and no rule is restated anywhere in the file. Both slugs exist in every stock block theme, so the inversion arrives everywhere. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The typeface. The pattern states no font family anywhere. Kickers, titles and dates are all set in your face; the design is in the tracking and the scale, not in the family. - Your colours. The ground asks for base and the type asks for contrast, the two slugs every stock block theme defines, each ending on a colour WordPress itself guarantees. Nothing in the section can blank. - Your spacing scale. The band's padding, the gaps between openings and the mat's inset are all spacing presets, so a theme with a generous scale gets a roomier grid without you editing anything. - Your images. The three image blocks include example photographs, with the crop already set. Choose Replace on any image to select your own file. ### What it decides for itself - Full bleed with its own measure. The section spans the viewport and holds its content to 1240px, so it is a band on a page rather than another column of body text, and it does not depend on the section above or below it for air. - A grid that reflows, not three columns that do not. The openings sit in a core/group with a grid layout and an 18rem minimum column, so the row is three across on a desktop, two on a tablet and one on a phone, and it changes at the width the cards run out of room rather than at the single 782px line core draws for a Columns block. It was three columns until 2026-08-22, and at 820 that put each title in a 208px column: "The shed that taught us to measure twice" set 13 characters per line over five lines in Twenty Twenty-Four, which is a ribbon and not a headline. Nothing was hidden and no type was shrunk; the row simply stops insisting on three. - The 3:2 crop, and scale: cover. Whatever you upload is cropped to the same proportion in all three openings, so the row stays level even when your three photographs do not match. - The mat inset, and the one thing about it that is not your theme's. The image is padded away from the column edges and the rule is not. That asymmetry is the pattern; remove it and you have a caption. The side inset is a clamp() from 12px to 24px rather than a spacing preset, and that is deliberate: a preset is whatever the buyer's theme says it is, and in Twenty Twenty-Four spacing|40 is wide enough to take 108px out of a 341px column and leave the title breaking at 19 characters even on a desktop. The top and bottom of the mat are still presets, so the section still breathes on your scale; only the two edges that decide how wide a title can be are bounded. - The title ramp. Titles are a clamp() set tight (line-height 1.15, slightly negative tracking) so a three-line title still reads as one object. Titles carry their own explicit text colour rather than inheriting it, because a theme's heading element style beats a colour set on the wrapping group. - The kicker and date scale. Both are small, uppercase and widely tracked, and deliberately far from the title in size: the scale gap is what makes the title read as the thing to click. Technical notesBlock mechanics, responsive behaviour and constraints ### Notes - Core blocks only: group, paragraph, heading, image. The row of openings is a group with a grid layout, so there is no Columns block in the pattern at all. No plugin, no script, nothing to keep updated. - Every colour is a fallback chain ending on a colour WordPress guarantees, and no rule, border or divider states a colour at all: they are all currentColor. - Text never sits on a photograph here. The pictures carry atmosphere and the type sits on your page ground beneath them, so no image you choose can make a title hard to read. ### 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 ## Post grid: common questions Does Post grid need a plugin? No. It is built only from core WordPress blocks (group, heading, image and paragraph), so it pastes into the block editor with nothing to install. Will Post 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 Post grid have? 2: Three openings and Night openings. 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 Post grid free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 12KB of core-block markup, 4 blocks (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 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)Header Nav bar A header bar on one line: a heavy, tightly tracked wordmark at the left edge against tiny widely tracked links at the right, one solid action beside them, and a hairline under the whole bar. The links are your WordPress menu, a core navigation block that folds to a menu button on a phone so the bar stays one line. Compact by construction, so it reads as the top of a page and never as a hero. States no colour and no font of its own. (https://patternpaste.com/pattern/nav-bar.html)Footer Footer booking fold A local-business footer drawn as an open fold: a broad field puts a display sign-off above the address, grouped hours and contact links; a narrower booking corner begins lower, enclosed by a heavy top edge and two sides. One closing rule joins both parts to the useful and legal links below. The two fields stack in reading order on a phone. States no colour and no font of its own. (https://patternpaste.com/pattern/footer-booking-fold.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 Blog Access Subscription Plugin None, core blocks only Variations 2 Colour From your theme Type From your theme Motion None Blocks group, heading, image, paragraph Presets color 5, spacing 6, font-size 2 WordPress 7.0+ Continue exploring ## Next in Blog Explore all 7 Blog patterns (https://patternpaste.com/patterns/posts/) Shot in Twenty Twenty-Five Blog No plugin needed ### Post featured lead Two Query Loops read as one section: the newest post opens at display size with its featured image, its byline and an excerpt, and the three behind it sit in a rail beside it as ruled date-and-title lines with no picture at all. Blog Preview pattern (https://patternpaste.com/pattern/post-featured-lead.html) Shot in Twenty Twenty-Five Blog No plugin needed ### Lead over the recent row Two Query Loops read as one section, turned through ninety degrees: the newest post runs the full measure with a wide 21:9 picture, a byline and an excerpt, and the three behind it sit under it as a row of three ruled date-and-title columns with no picture at all. Blog Preview pattern (https://patternpaste.com/pattern/post-lead-stack.html) Shot in Twenty Twenty-Five Blog No plugin needed ### Post list An illustrated article index: a cropped WordPress photograph and tracked date sit in a narrow left column, beside a large title and short standfirst. Blog Preview pattern (https://patternpaste.com/pattern/post-list.html)