--- title: "How to Show Blog Posts in Masonry Grid Layout in Elementor?" url: https://theplusaddons.com/docs/show-blog-posts-in-masonry-grid-layout-in-elementor/ date: 2023-05-04 modified: 2026-09-11 lang: en author: "Aditya Sharma" description: "Do you want a Pinterest-style blog page, where cards keep their own height and stack without gaps? That is a masonry layout. The Blog/Post Listing widget in The Plus Addons..." image: https://theplusaddons.com/wp-content/uploads/2023/05/How-to-Show-Blog-Posts-in-Masonry-Grid-Layout-in-Elementor_-1024x536.jpg word_count: 327 --- # How to Show Blog Posts in Masonry Grid Layout in Elementor? ## - The Plus Addons for Elementor Blog/Post Listing widget includes Masonry in the free version, and the widget is enabled under ThePlus Settings > Widgets. - Masonry layout sets Content > Layout to Masonry and uses the same column settings as Grid, with Column 4 on desktop, Column 3 on tablet, and Column 2 on mobile by default. - Masonry places posts left to right across the top row, and it shows the staggered effect best with mixed image shapes and excerpt lengths, especially when cards are not the same height. Do you want a Pinterest-style blog page, where cards keep their own height and stack without gaps? That is a masonry layout. The Blog/Post Listing widget in The Plus Addons for Elementor includes it in the free version. *To check the complete feature overview documentation of The Plus Addons for Elementor Blog Listing widget, [click here](https://theplusaddons.com/docs/blog-listing-widget-settings-overview/).* ***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-listing/?utm_source=tpae&utm_medium=docs&utm_campaign=text#blog-post-wgts) ## Before You Start - **Edition:** Free — available in both The Plus Addons for Elementor (Free) and Pro.- **Widget to enable:** Blog/Post Listing, switched on under **ThePlus Settings > Widgets**. ## Step 1: Add the widget and choose Masonry Drag the **Blog/Post Listing** widget onto the page. In **Content > Layout**, set **Layout** to **Masonry**. ![The Layout control in the Blog Listing panel with Masonry selected](https://theplusaddons.com/wp-content/uploads/2026/09/tp-blog-listout-layout-wide-masonry.webp) ## Step 2: Set the columns Open **Content > Columns Manage**. Masonry uses the same column settings as Grid: **Column 4** on desktop, **Column 3** on tablet and **Column 2** on mobile by default. Three columns usually shows the staggered effect best. ![Blog posts shown in a masonry layout](https://theplusaddons.com/wp-content/uploads/2023/05/blog-listing-masonry-layout-demo.png) ## Grid or Masonry? | | Grid | Masonry | | --- | ---- | ------- | | Card heights | Rows line up | Each card keeps its own height | | Best for | Uniform posts with similar excerpts | Posts with mixed image shapes and lengths | | Edition | Free | Free | ## Settings Reference | Setting | Where | Default | | ------- | ----- | ------- | | Layout | Content > Layout | Grid | | Desktop Column | Content > Columns Manage | Column 4 | | Tablet Column | Content > Columns Manage | Column 3 | | Mobile Column | Content > Columns Manage | Column 2 | ## Limitations - **Reading order runs across, not down.** Posts are placed left to right, so the newest posts are across the top row rather than down the first column.- **Little effect with same-size images.** If every featured image has the same proportions and every excerpt the same length, masonry looks the same as grid. ## Troubleshooting ### Masonry looks exactly like Grid Your cards are already the same height. Masonry only shows a difference when image proportions or text lengths vary. ## Related Docs - [Blog Listing widget: settings overview](https://theplusaddons.com/docs/blog-listing-widget-settings-overview/) — every control in the widget.- [Show blog posts in a grid layout](https://theplusaddons.com/docs/show-blog-posts-in-grid-layout-in-elementor/)- [Show blog posts in a metro layout](https://theplusaddons.com/docs/show-blog-posts-in-metro-layout-in-elementor/)- [Show blog posts in a carousel slider](https://theplusaddons.com/docs/show-blog-posts-in-carousel-slider-in-elementor/) ## Frequently Asked Questions **Q: Why does my masonry blog layout look the same as a grid layout in Elementor?** A: Masonry only stands out when the cards are uneven, so identical image proportions and matching excerpt lengths can make it look like Grid. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses the same column settings as Grid, but the visual difference comes from varied card heights. If every post is too uniform, there is little staggered effect to show. **Q: What do I need before using the masonry layout for blog posts?** A: The Blog/Post Listing widget has to be installed and activated inside The Plus Addons for Elementor, and it is enabled under ThePlus Settings > Widgets. The page also notes that Masonry is available in the free version, so you do not need Pro just to use this layout. That matters because the layout choice only appears once the widget is available in Elementor. **Q: How many columns work best for a masonry blog grid?** A: Three columns usually shows the staggered masonry effect best. The default settings use Column 4 on desktop, Column 3 on tablet, and Column 2 on mobile, and Masonry shares those same column controls as Grid. If you want the Pinterest-style look to read clearly, three columns is the sweet spot because it gives enough variation without making the layout feel too crowded. **Q: Does masonry work better for some blog posts than others?** A: Masonry fits posts with mixed image shapes and different excerpt lengths because each card keeps its own height instead of forcing rows to line up. That makes it a better match for uneven content than a uniform grid. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH includes this in the Blog/Post Listing widget, so it is useful when your posts do not all have the same visual weight. **Q: Why are my newest posts showing across the top row instead of down the first column?** A: Masonry reads left to right, not top to bottom, so newer posts appear across the top row first. That is a built-in limitation of this layout and it changes how people scan the page compared with a vertical feed. If you want a first-column reading order, masonry is not the right fit; if you want a staggered visual stack, this behavior is normal. **Q: What should I use instead of masonry if I want a different blog layout?** A: The Plus Addons for Elementor offers other listing styles besides Masonry: Grid, Metro, and Carousel Slider. Grid works best for uniform posts with similar excerpts, while Masonry suits mixed image shapes and lengths. If you are deciding between layouts, that difference matters more than style alone because it affects how evenly your cards line up and how much visual movement the page has.