Masonry Portfolio Grids Demo (Demo)

[vc_row][vc_column][gem_divider margin_top=”50″][/vc_column][/vc_row][vc_row][vc_column width=”1/4″ el_class=”custom-hover”][gem_divider margin_bottom=”80″][vc_column_text][/vc_column_text][gem_divider margin_bottom=”20″][vc_column_text]

100% Width

[/vc_column_text][vc_column_text css=”.vc_custom_1458466531160{padding-right: 15px !important;padding-left: 15px !important;}”]

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per incept himenaeos. Mauris in erat justo lorem ipsum

[/vc_column_text][gem_divider margin_bottom=”50″][/vc_column][vc_column width=”1/4″ el_class=”custom-hover”][gem_divider margin_bottom=”80″][vc_column_text][/vc_column_text][gem_divider margin_bottom=”20″][vc_column_text]

2x Columns

[/vc_column_text][vc_column_text css=”.vc_custom_1458466537508{padding-right: 15px !important;padding-left: 15px !important;}”]

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per incept himenaeos. Mauris in erat justo lorem ipsum

[/vc_column_text][gem_divider margin_bottom=”50″][/vc_column][vc_column width=”1/4″ el_class=”custom-hover”][gem_divider margin_bottom=”80″][vc_column_text][/vc_column_text][gem_divider margin_bottom=”20″][vc_column_text]

3x Columns

[/vc_column_text][vc_column_text css=”.vc_custom_1458466542548{padding-right: 15px !important;padding-left: 15px !important;}”]

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per incept himenaeos. Mauris in erat justo lorem ipsum

[/vc_column_text][gem_divider margin_bottom=”50″][/vc_column][vc_column width=”1/4″ el_class=”custom-hover”][gem_divider margin_bottom=”80″][vc_column_text][/vc_column_text][gem_divider margin_bottom=”20″][vc_column_text]

4x Columns

[/vc_column_text][vc_column_text css=”.vc_custom_1458466551355{padding-right: 15px !important;padding-left: 15px !important;}”]

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per incept himenaeos. Mauris in erat justo lorem ipsum

[/vc_column_text][gem_divider margin_bottom=”50″][/vc_column][/vc_row][vc_row][vc_column][gem_divider margin_bottom=”80″][/vc_column][/vc_row][vc_row el_id=”i100x”][vc_column][gem_fullwidth container=”1″ background_color=”#f0f3f2″ padding_top=”84″ padding_bottom=”100″][vc_column_text]

100% width

[/vc_column_text][gem_divider margin_bottom=”57″][vc_row_inner][vc_column_inner width=”2/3″][vc_single_image image=”14196″ img_size=”full” onclick=”custom_link” img_link_target=”_blank” link=”http://democontent.codex-themes.com/thegem/portfolios/masonry-grids/portfolio-masonry-100-1/”][/vc_column_inner][vc_column_inner width=”1/3″][vc_column_text]

demo 1
justified

[/vc_column_text][gem_list type=”check-style-1″ color=”3″]

  • Text position: on hover & below image
  • Filters: disabled & enabled
  • Gaps: no gaps & 42 px (set any you wish)
  • Sorting: disabled & enabled
  • Hovers: cyan breeze & zooming white
  • Likes: disabled & enabled
  • Paginations: infinite scroll & classic
  • Animations: move up & fall perspective
  • Caption Fill: none & light
  • Sharing: enabled

[/gem_list][gem_button size=”medium” corner=”30″ icon_pack=”elegant” text=”view demo” text_color=”#ffffff” hover_text_color=”#ffffff” background_color=”#00bcd4″ hover_background_color=”#323443″ link=”url:%2Fthegem%2Fportfolios%2Fmasonry-grids%2Fportfolio-masonry-100-1%2F||”][gem_divider margin_bottom=”96″][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

demo 2
justified

[/vc_column_text][gem_list type=”check-style-1″ color=”3″]

  • Layout: 5 columns & 4 columns
  • Text position: below image & on image
  • Filters: disabled & enabled
  • Gaps: 21 px & 42 px (set any you wish)
  • Hovers: vertical sliding & gradient
  • Likes: disabled
  • Paginations: infinite & load more
  • Animations: fade in & flip
  • Sharing: enabled
  • Sorting: disabled

[/gem_list][gem_button size=”medium” corner=”30″ icon_pack=”elegant” text=”view demo” text_color=”#ffffff” hover_text_color=”#ffffff” background_color=”#00bcd4″ hover_background_color=”#323443″ link=”url:%2Fthegem%2Fportfolios%2Fmasonry-grids%2Fportfolio-masonry-100-2%2F||”][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”14194″ img_size=”full” onclick=”custom_link” img_link_target=”_blank” link=”http://democontent.codex-themes.com/thegem/portfolios/masonry-grids/portfolio-masonry-100-2/”][/vc_column_inner][/vc_row_inner][/gem_fullwidth][/vc_column][/vc_row][vc_row css=”.vc_custom_1457697445710{margin-bottom: 0px !important;}” el_id=”i2x”][vc_column][gem_divider margin_top=”58″][vc_column_text]

2x columns

[/vc_column_text][gem_divider margin_top=”74″][/vc_column][/vc_row][vc_row css=”.vc_custom_1457697449635{margin-bottom: 0px !important;}”][vc_column width=”2/3″][vc_single_image image=”14192″ img_size=”full” onclick=”custom_link” img_link_target=”_blank” link=”http://democontent.codex-themes.com/thegem/portfolios/masonry-grids/portfolio-masonry-2x-1/”][/vc_column][vc_column width=”1/3″][vc_column_text]

demo 3
justified

[/vc_column_text][gem_list type=”check-style-1″ color=”3″]

  • Text position: on hover & below image
  • Filters: disabled & enabled
  • Gaps: no gaps & 42 px (set any you wish)
  • Sorting: disabled & enabled
  • Hovers: cyan breeze & zooming white
  • Likes: disabled & enabled
  • Paginations: infinite scroll & classic
  • Animations: move up & fall perspective
  • Caption Fill: none & light
  • Sharing: enabled

[/gem_list][gem_button style=”outline” size=”medium” corner=”30″ border=”3″ icon_pack=”elegant” text=”view demo” text_color=”#00bcd4″ hover_text_color=”#ffffff” hover_background_color=”#00bcd4″ link=”url:%2Fthegem%2Fportfolios%2Fmasonry-grids%2Fportfolio-masonry-2x-1%2F||”][/vc_column][/vc_row][vc_row css=”.vc_custom_1457695774847{margin-bottom: 0px !important;}”][vc_column css=”.vc_custom_1457695862934{margin-top: -32px !important;margin-bottom: -30px !important;}”][gem_image position=”centered” disable_lightbox=”1″ src=”11517″][/vc_column][/vc_row][vc_row][vc_column width=”1/3″][vc_column_text]

demo 4
justified

[/vc_column_text][gem_list type=”check-style-1″ color=”3″]

  • Text position: on hover & below image
  • Filters: disabled & enabled
  • Gaps: no gaps & 42 px (set any you wish)
  • Sorting: disabled & enabled
  • Hovers: cyan breeze & zooming white
  • Likes: disabled & enabled
  • Paginations: infinite scroll & classic
  • Animations: move up & fall perspective
  • Caption Fill: none & light
  • Sharing: enabled

[/gem_list][gem_button style=”outline” size=”medium” corner=”30″ border=”3″ icon_pack=”elegant” text=”view demo” text_color=”#00bcd4″ hover_text_color=”#ffffff” hover_background_color=”#00bcd4″ link=”url:%2Fthegem%2Fportfolios%2Fmasonry-grids%2Fportfolio-masonry-2x-2%2F||”][gem_divider margin_top=”105″][/vc_column][vc_column width=”2/3″][vc_single_image image=”14190″ img_size=”full” onclick=”custom_link” img_link_target=”_blank” link=”http://democontent.codex-themes.com/thegem/portfolios/masonry-grids/portfolio-masonry-2x-2/”][/vc_column][/vc_row][vc_row el_id=”i3x”][vc_column][gem_fullwidth container=”1″ background_color=”#f0f3f2″ padding_top=”100″ padding_bottom=”118″][vc_column_text]

3x columns

[/vc_column_text][gem_divider margin_top=”80″][vc_row_inner][vc_column_inner width=”2/3″][vc_single_image image=”14188″ img_size=”full” onclick=”custom_link” img_link_target=”_blank” link=”http://democontent.codex-themes.com/thegem/portfolios/masonry-grids/portfolio-masonry-3x-1/”][/vc_column_inner][vc_column_inner width=”1/3″][vc_column_text]

demo 5
justified

[/vc_column_text][gem_list type=”check-style-1″ color=”3″]

  • Text position: on hover & below image
  • Filters: disabled & enabled
  • Gaps: no gaps & 42 px (set any you wish)
  • Sorting: disabled & enabled
  • Hovers: cyan breeze & zooming white
  • Likes: disabled & enabled
  • Paginations: infinite scroll & classic
  • Animations: move up & fall perspective
  • Caption Fill: none & light
  • Sharing: enabled

[/gem_list][gem_button size=”medium” corner=”30″ icon_pack=”elegant” text=”view demo” text_color=”#ffffff” hover_text_color=”#ffffff” background_color=”#00bcd4″ hover_background_color=”#323443″ link=”url:%2Fthegem%2Fportfolios%2Fjustified-portfolio-demos%2Fportfolio-justified-3x-1%2F||”][gem_divider margin_top=”109″][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

demo 6
justified

[/vc_column_text][gem_list type=”check-style-1″ color=”3″]

  • Layout: 5 columns & 4 columns
  • Text position: below image & on image
  • Filters: disabled & enabled
  • Gaps: 21 px & 42 px (set any you wish)
  • Hovers: vertical sliding & gradient
  • Likes: disabled
  • Paginations: infinite & load more
  • Animations: fade in & flip
  • Sharing: enabled
  • Sorting: disabled

[/gem_list][gem_button size=”medium” corner=”30″ icon_pack=”elegant” text=”view demo” text_color=”#ffffff” hover_text_color=”#ffffff” background_color=”#00bcd4″ hover_background_color=”#323443″ link=”url:%2Fthegem%2Fportfolios%2Fmasonry-grids%2Fportfolio-masonry-3x-2%2F||”][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”14186″ img_size=”full” onclick=”custom_link” img_link_target=”_blank” link=”http://democontent.codex-themes.com/thegem/portfolios/masonry-grids/portfolio-masonry-3x-2/”][/vc_column_inner][/vc_row_inner][/gem_fullwidth][/vc_column][/vc_row][vc_row css=”.vc_custom_1457697482896{margin-bottom: 0px !important;}” el_id=”i4x”][vc_column][gem_divider margin_top=”58″][vc_column_text]

4x columns

[/vc_column_text][gem_divider margin_top=”74″][/vc_column][/vc_row][vc_row css=”.vc_custom_1457697318664{margin-bottom: 0px !important;}”][vc_column width=”2/3″][vc_single_image image=”14184″ img_size=”full” onclick=”custom_link” img_link_target=”_blank” link=”http://democontent.codex-themes.com/thegem/portfolios/masonry-grids/portfolio-masonry-4x-1/”][/vc_column][vc_column width=”1/3″][vc_column_text]

demo 3
justified

[/vc_column_text][gem_list type=”check-style-1″ color=”3″]

  • Text position: on hover & below image
  • Filters: disabled & enabled
  • Gaps: no gaps & 42 px (set any you wish)
  • Sorting: disabled & enabled
  • Hovers: cyan breeze & zooming white
  • Likes: disabled & enabled
  • Paginations: infinite scroll & classic
  • Animations: move up & fall perspective
  • Caption Fill: none & light
  • Sharing: enabled

[/gem_list][gem_button style=”outline” size=”medium” corner=”30″ border=”3″ icon_pack=”elegant” text=”view demo” text_color=”#00bcd4″ hover_text_color=”#ffffff” hover_background_color=”#00bcd4″ link=”url:http%3A%2F%2Fthegem%2Fportfolios%2Fmasonry-grids%2Fportfolio-masonry-4x-1%2F||”][/vc_column][/vc_row][vc_row css=”.vc_custom_1457695774847{margin-bottom: 0px !important;}”][vc_column css=”.vc_custom_1457695862934{margin-top: -32px !important;margin-bottom: -30px !important;}”][gem_image position=”centered” disable_lightbox=”1″ src=”11517″][/vc_column][/vc_row][vc_row][vc_column width=”1/3″][vc_column_text]

demo 4
justified

[/vc_column_text][gem_list type=”check-style-1″ color=”3″]

  • Text position: on hover & below image
  • Filters: disabled & enabled
  • Gaps: no gaps & 42 px (set any you wish)
  • Sorting: disabled & enabled
  • Hovers: cyan breeze & zooming white
  • Likes: disabled & enabled
  • Paginations: infinite scroll & classic
  • Animations: move up & fall perspective
  • Caption Fill: none & light
  • Sharing: enabled

[/gem_list][gem_button style=”outline” size=”medium” corner=”30″ border=”3″ icon_pack=”elegant” text=”view demo” text_color=”#00bcd4″ hover_text_color=”#ffffff” hover_background_color=”#00bcd4″ link=”url:%2Fthegem%2Fportfolios%2Fmasonry-grids%2Fportfolio-masonry-4x-2%2F||”][gem_divider margin_top=”120″][/vc_column][vc_column width=”2/3″][vc_single_image image=”14182″ img_size=”full” onclick=”custom_link” img_link_target=”_blank” link=”http://democontent.codex-themes.com/thegem/portfolios/masonry-grids/portfolio-masonry-4x-2/”][/vc_column][/vc_row][vc_row][vc_column][gem_fullwidth background_style=”cover” background_parallax=”1″ background_parallax_type=”fixed” background_image=”11537″ padding_top=”243″ padding_bottom=”157″][gem_icon pack=”elegant” shape=”circle” size=”medium” centered=”1″ icon_elegant=”e104″ color=”#ffb932″ border_color=”#ffb932″][gem_divider margin_top=”30″][vc_column_text]

the gem is awesome!

[/vc_column_text][gem_divider margin_top=”30″][vc_column_text]

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam nostrud exercitation ullamco laboris nisiut aliquip ex ea commodo. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

[/vc_column_text][gem_divider margin_top=”-92″][gem_alert_box content_background_color=”” button_1_style=”outline” button_1_size=”medium” button_1_text_weight=”thin” button_1_corner=”0″ button_1_border=”1″ button_1_icon_pack=”elegant” button_2_activate=”1″ button_2_style=”outline” button_2_size=”medium” button_2_text_weight=”thin” button_2_corner=”0″ button_2_border=”1″ button_2_icon_pack=”elegant” centered=”1″ button_1_text=”purchase now” button_1_text_color=”#ff2e8c” button_1_hover_background_color=”rgba(153,47,101,0.18)” button_1_border_color=”#ff2e8c” button_2_text=”leave me alone” button_2_text_color=”#ffc556″ button_2_hover_background_color=”rgba(156,126,76,0.2)” button_2_border_color=”#ffc556″][/gem_alert_box][/gem_fullwidth][/vc_column][/vc_row]