--- title: "How to Create Category Masonry Layout in WordPress?" url: https://nexterwp.com/docs/create-category-masonry-layout-in-wordpress/ date: 2024-11-29 modified: 2026-09-27 lang: en author: "Aditya Sharma" description: "A grid forces every card to the same height, which means cropping. If your category images are a mix of tall and wide, that is the wrong trade. Masonry lets..." image: https://nexterwp.com/wp-content/uploads/2024/11/How-to-Create-Category-Masonry-Layout-in-WordPress_-1024x519.jpg word_count: 546 --- # How to Create Category Masonry Layout in WordPress? ## Key Takeaways - Nexter Blocks Taxonomy Listing block shows post categories in a masonry layout on a WordPress page. - Layout tab selects Masonry in the Layout section, then Select Taxonomy dropdown chooses Categories to display the category grid. - Nexter Blocks requires installation and activation before the Taxonomy Listing block works, and the post notes that Tags can also appear in a masonry grid. A grid forces every card to the same height, which means cropping. If your category images are a mix of tall and wide, that is the wrong trade. Masonry lets each card keep its own proportions and packs them together, so nothing is cut off. *For every Taxonomy Listing setting in one place, see the [Taxonomy Listing guide](https://nexterwp.com/docs/add-taxonomy-listing-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/builder/wordpress-taxonomy-listing/) ## Before You Start - **Edition:** **Pro** — the Taxonomy Listing block needs Nexter Blocks Pro.- **Block to enable:** Taxonomy Listing, switched on under **Nexter > Blocks** in your WordPress dashboard.- **Terms that exist.** The block lists your real taxonomy terms, so a site with one category shows one card. ## Steps - Add the **Taxonomy Listing** block and set the layout to **masonry**. ![Choosing the masonry layout](https://nexterwp.com/wp-content/uploads/2026/09/tx-layout-masonry.webp) - Set the column count per breakpoint, then publish. ![Masonry column settings](https://nexterwp.com/wp-content/uploads/2026/09/tx-fe-masonry.webp) ## How It Behaves - **Masonry and grid share the same engine.** Measured: both carry `tpgb-isotope` on the wrapper and render real `` tags. The difference is how the heights are resolved.- **Each card keeps its image's proportions**, so a tall image stays tall.- **Cards are placed by column, not by row**, so the visual order runs down a column before it runs across — worth knowing if the order of your categories carries meaning.- **The category image comes from Nexter's own term image field**, set on the term itself when you edit it. It is not WordPress's featured image and, on a product category, it is not WooCommerce's category image either — those are stored separately and this block does not read them.- **A term with no image still renders one.** Measured: removing a term's image produced a card showing a generic placeholder shipped with the plugin, not a blank or broken image. That is why missing category images are easy to miss.- **The post count is shown by default.** Measured on an untouched listing: each card rendered its real term count.- **Type a number into the item count; do not leave it blank.** Measured on 5.0.6: a blank field renders **one** term rather than all of them, and so does `0`. Reported to the developers.- **Measured with Nexter Blocks Pro deactivated:** the block renders nothing at all — not a wrapper, not a message, zero output. This is a Pro-only block. ## Limitations - **Pro only** — nothing renders with Pro deactivated.- **Masonry needs JavaScript to position the cards.** Before it runs, the layout is briefly a plain stack.- **The bottom edge is ragged** by design. If you need a clean line, use [grid](https://nexterwp.com/docs/create-category-grid-in-wordpress/).- **Similar image heights make masonry pointless.** If all your term images are the same shape, it renders as an ordinary grid and costs you the script.- **Reading order is by column**, which can surprise people expecting left-to-right. ## Troubleshooting ### It looks exactly like a grid Your term images are all the same proportions, so there are no height differences to resolve. That is working correctly; grid would be the lighter choice. ### The cards jump around as the page loads That is masonry positioning running. It settles once the script has placed everything. ### The categories are in an odd order Masonry fills by column. The query order is unchanged, but the visual order reads downwards first. ### Only one card is showing The item count is blank or zero. Enter a number. ## Related Docs - [Create a category grid](https://nexterwp.com/docs/create-category-grid-in-wordpress/)- [Add taxonomy listing in WordPress](https://nexterwp.com/docs/add-taxonomy-listing-in-wordpress/)- [Create a category metro layout](https://nexterwp.com/docs/create-category-metro-layout-in-wordpress/)- [Create a category carousel](https://nexterwp.com/docs/create-a-category-carousel-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/) ## Frequently Asked Questions **Q: Why is my category masonry layout not showing up in WordPress?** A: The usual blocker is that the Taxonomy Listing block from Nexter Blocks is not installed and activated. This tutorial uses that block to show post categories in a masonry layout, so the feature depends on Nexter Blocks being available first. It also expects you to have created some post categories before adding the block, otherwise there is nothing to display. **Q: What do I need before creating a category masonry grid in WordPress?** A: You need post categories already created, plus the Taxonomy Listing block from Nexter Blocks installed and activated. That block is the core of the setup in Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter. Without categories in place, the masonry layout has no taxonomy items to render. **Q: Can I use the same WordPress masonry layout for tags instead of categories?** A: The same Taxonomy Listing block can display tags in a masonry grid as well. The tutorial notes that you just select Tags instead of Categories in the Select Taxonomy dropdown. That makes it a practical choice when you want one layout style for different taxonomy types without changing the overall structure. **Q: What is the difference between a taxonomy listing and a category masonry layout?** A: A category masonry layout is just one display mode inside the Taxonomy Listing block. The block can show taxonomy items in a masonry format, and this tutorial uses it specifically for post categories. In practice, that means the layout choice comes first, then you decide whether the content source is Categories or Tags. **Q: How do I know if I picked the right layout style for a masonry grid?** A: The key detail is that Masonry must be selected from the Layout section after choosing an appropriate style from the Style section in the Layout tab. That order matters because style controls the look while Masonry controls how items flow. If the grid looks wrong, it usually means the layout type was not switched to Masonry. **Q: Where can I see an example of the WordPress taxonomy listing block?** A: The page points to a live example through the [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/builder/wordpress-taxonomy-listing/) and also links to the feature overview at [click here](https://nexterwp.com/docs/add-taxonomy-listing-in-wordpress/). Those references are useful if you want to compare how the Taxonomy Listing block behaves before building your own category masonry grid.