Introduction

Show content on your pages in a responsive masonry layout using the masonry shortcode. Set the width (% or px) of each masonry item. Masonry items fit together like bricks with the unused space being filled in the best possible way.

Basic Example with Gutter

This example has a 10px gutter on each masonry item.

Basic Example Without Gutter

Posts

Show posts using the masonry layout. For more information see the custom post type or blog shortcode pages.

The End of Boring

Donec pulvinar tristique tellus, sed dapibus nisl scelerisque sed. Pellentesque non nunc et felis ornare vulputate. Etiam scelerisque suscipit…

Beyond the Code

Etiam nisi ligula, varius eget magna et, tristique sagittis diam. Donec est enim, eleifend quis tempor eget, elementum sed…

Namche Bazaar

Maecenas auctor scelerisque ipsum quis volutpat. Morbi iaculis bibendum nibh, sit amet iaculis urna rhoncus et. Nulla sagittis purus…

Catalonia

Praesent quis massa sed ipsum tincidunt egestas. Sed consequat massa vel sapien lobortis vulputate. Donec sit amet iaculis nunc,…

Unleash the Code

Etiam quis tellus a justo molestie faucibus pretium et mi. Proin sed pellentesque enim, id pharetra felis. Quisque sodales…

Create a Lasting Impression

Duis nec orci in leo tristique auctor. Suspendisse ultricies dui nec dictum lacinia. Pellentesque congue eleifend lacus eu tincidunt….

Finding Inspiration

Etiam adipiscing Etiam adipiscing nunc lectus, ac gravida nulla tincidunt ut. Suspendisse at elit eros. Ut pulvinar id leo…

Explore More Shortcodes

Buy Now - Only $30
View shortcodes used to create this page.

<style>
.intense.alert {
margin-bottom: 0 !important;
}
</style>
[intense_content_section]
<h2>Introduction</h2>
Show content on your pages in a responsive masonry layout using the masonry shortcode. Set the width (% or px) of each masonry item. Masonry items fit together like bricks with the unused space being filled in the best possible way.
[/intense_content_section]
[intense_content_section background_type="color" background_color="#f9f9f9" border_top="1px solid #ededed" border_bottom="1px solid #ededed"]
<h2>Basic Example with Gutter</h2>
This example has a 10px gutter on each masonry item.
[intense_masonry gutter="10"]
[intense_masonry_item width="66.666%"]
[intense_alert color="primary height="200"]
[intense_spacer height="400"]
[/intense_alert]
[/intense_masonry_item]
[intense_masonry_item width="33.333%"]
[intense_alert color="error"]
[intense_spacer height="200"]
[/intense_alert]
[/intense_masonry_item]
[intense_masonry_item width="33.333%"]
[intense_alert color="success"]
[intense_spacer height="200"]
[/intense_alert]
[/intense_masonry_item]
[intense_masonry_item width="33.333%"]
[intense_alert color="warning"]
[intense_spacer height="200"]
[/intense_alert]
[/intense_masonry_item]
[intense_masonry_item width="33.333%"]
[intense_alert color="inverse"]
[intense_spacer height="200"]
[/intense_alert]
[/intense_masonry_item]
[intense_masonry_item width="66.666%"]
[intense_alert color="pink"]
[intense_spacer height="400"]
[/intense_alert]
[/intense_masonry_item]
[intense_masonry_item width="33.333%"]
[intense_alert color="purple"]
[intense_spacer height="200"]
[/intense_alert]
[/intense_masonry_item]
[intense_masonry_item width="33.333%"]
[intense_alert color="#333"]
[intense_spacer height="200"]
[/intense_alert]
[/intense_masonry_item]
[intense_masonry_item width="33.333%"]
[intense_alert color="#999"]
[intense_spacer height="200"]
[/intense_alert]
[/intense_masonry_item]
[intense_masonry_item width="33.333%"]
[intense_alert color="info"]
[intense_spacer height="200"]
[/intense_alert]
[/intense_masonry_item]
[/intense_masonry]
[/intense_content_section]
[intense_content_section]
<h2>Basic Example Without Gutter</h2>

[intense_masonry gutter="0"]
[intense_masonry_item width="50%"]
[intense_alert color="primary height="200"]
[intense_spacer height="400"]
[/intense_alert]
[/intense_masonry_item]
[intense_masonry_item width="25%"]
[intense_alert color="error"]
[intense_spacer height="200"]
[/intense_alert]
[/intense_masonry_item]
[intense_masonry_item width="25%"]
[intense_alert color="success"]
[intense_spacer height="200"]
[/intense_alert]
[/intense_masonry_item]
[intense_masonry_item width="25%"]
[intense_alert color="warning"]
[intense_spacer height="200"]
[/intense_alert]
[/intense_masonry_item]
[intense_masonry_item width="25%"]
[intense_alert color="inverse"]
[intense_spacer height="200"]
[/intense_alert]
[/intense_masonry_item]
[intense_masonry_item width="50%"]
[intense_alert color="pink"]
[intense_spacer height="400"]
[/intense_alert]
[/intense_masonry_item]
[intense_masonry_item width="25%"]
[intense_alert color="purple"]
[intense_spacer height="200"]
[/intense_alert]
[/intense_masonry_item]
[intense_masonry_item width="25%"]
[intense_alert color="#333"]
[intense_spacer height="200"]
[/intense_alert]
[/intense_masonry_item]
[intense_masonry_item width="25%"]
[intense_alert color="#999"]
[intense_spacer height="200"]
[/intense_alert]
[/intense_masonry_item]
[intense_masonry_item width="25%"]
[intense_alert color="info"]
[intense_spacer height="200"]
[/intense_alert]
[/intense_masonry_item]
[/intense_masonry]
[/intense_content_section]
[intense_content_section background_type="color" background_color="#f9f9f9" border_top="1px solid #ededed" border_bottom="1px solid #ededed"]
<h2>Posts</h2>
Show posts using the masonry layout. For more information see the custom post type or blog shortcode pages.
[intense_blog post_type="post" taxonomy="category" template="masonry" filter_effects="fade, scale" show_missing_image="1" navigation_color="#111111" is_masonry="1" gutter="15" infinite_scroll="1"]
[/intense_content_section]

[intense_snippet snippet_id="Child Theme | Shortcodes/footer" snippet_title="Shortcode Page Footer"]