Masonry Shortcode

<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"]