Advanced Grids
overview

[vc_row][vc_column][vc_column_text]

Grid Layouts

[/vc_column_text][gem_divider margin_top=”35″][/vc_column][/vc_row][vc_row el_class=”custom-column”][vc_column width=”1/4″ el_class=”custom-hover”][gem_divider margin_top=”45″][vc_single_image image=”14323″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” link=”https://codex-themes.com/thegem-elementor/grid-alternative/#justified”][gem_divider][vc_column_text]

Justified

[/vc_column_text][vc_column_text]

Various number of columns and a bunch of layout settings like gap sizes, highlighted posts etc.

[/vc_column_text][gem_divider margin_top=”20″][gem_button position=”center” style=”outline” size=”tiny” corner=”35″ border=”2″ icon_pack=”elegant” text=”Show Demo ” link=”url:https%3A%2F%2Fcodex-themes.com%2Fthegem%2Fgrid-alternative%2F%23justified||target:%20_blank|” text_color=”#eda66d” hover_text_color=”#ffffff” hover_background_color=”#eda66d” border_color=”#eda66d” hover_border_color=”#eda66d”][/vc_column][vc_column width=”1/4″ el_class=”custom-hover”][gem_divider margin_top=”45″][vc_single_image image=”14317″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” link=”https://codex-themes.com/thegem-elementor/grid-alternative/on-hover/#masonry”][gem_divider][vc_column_text]

Masonry

[/vc_column_text][vc_column_text]

Lovely masonry grid overview, perfect for different featured image proportions. Flexible layout settings.

[/vc_column_text][gem_divider margin_top=”20″][gem_button position=”center” style=”outline” size=”tiny” corner=”35″ border=”2″ icon_pack=”elegant” text=”Show Demo ” link=”url:https%3A%2F%2Fcodex-themes.com%2Fthegem%2Fgrid-alternative%2Fon-hover%2F%23masonry||target:%20_blank|” text_color=”#ef609d” hover_text_color=”#ffffff” hover_background_color=”#ef609d” border_color=”#ef609d” hover_border_color=”#ef609d”][/vc_column][vc_column width=”1/4″ el_class=”custom-hover”][gem_divider margin_top=”45″][vc_single_image image=”14315″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” link=”https://codex-themes.com/thegem-elementor/grid-extended/blog-grid-on-hover/#metro”][gem_divider][vc_column_text]

Metro

[/vc_column_text][vc_column_text]

Blog grids in metro style. Best option for showcasing your blog post overviews in a modern way.

[/vc_column_text][gem_divider margin_top=”20″][gem_button position=”center” style=”outline” size=”tiny” corner=”35″ border=”2″ icon_pack=”elegant” text=”Show Demo ” link=”url:https%3A%2F%2Fcodex-themes.com%2Fthegem%2Fgrid-extended%2Fblog-grid-on-hover%2F%23metro||target:%20_blank|” text_color=”#b051da” hover_text_color=”#ffffff” hover_background_color=”#b051da” border_color=”#b051da” hover_border_color=”#b051da”][/vc_column][vc_column width=”1/4″ el_class=”custom-hover”][gem_divider margin_top=”45″][vc_single_image image=”14311″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” link=”https://codex-themes.com/thegem-elementor/grid-extended/#packery”][gem_divider][vc_column_text]

Packery

[/vc_column_text][vc_column_text]

Attract your visitor’s attention to some special blog highlights by choosing this modern grid style.

[/vc_column_text][gem_divider margin_top=”20″][gem_button position=”center” style=”outline” size=”tiny” corner=”35″ border=”2″ icon_pack=”elegant” text=”Show Demo ” link=”url:https%3A%2F%2Fcodex-themes.com%2Fthegem%2Fgrid-extended%2F%23packery||target:%20_blank|” text_color=”#6454fc” hover_text_color=”#ffffff” hover_background_color=”#6454fc” border_color=”#6454fc” hover_border_color=”#6454fc”][/vc_column][vc_column offset=”vc_hidden-sm vc_hidden-xs”][gem_divider margin_top=”70″][/vc_column][/vc_row][vc_row full_width=”stretch_row_content”][vc_column][vc_text_separator title_light=”1″ title_level=”h3″ title=”blog grid width “][gem_divider margin_top=”50″][/vc_column][/vc_row][vc_row][vc_column width=”1/4″][gem_image position=”centered” disable_lightbox=”1″ src=”14333″][gem_divider][vc_column_text]

100% Width

[/vc_column_text][vc_column_text]

Portfolio overviews, using 100% page width. You can use it in any of portfolio layouts above.

[/vc_column_text][/vc_column][vc_column width=”1/4″][gem_image position=”centered” disable_lightbox=”1″ src=”14331″][gem_divider][vc_column_text]

Fullwidth

[/vc_column_text][vc_column_text]

Post your portfolios in fullwidth content area. Applicable for any portfolio layout types.

[/vc_column_text][/vc_column][vc_column width=”1/4″][gem_image position=”centered” disable_lightbox=”1″ src=”14329″][gem_divider][vc_column_text]

With Sidebar

[/vc_column_text][vc_column_text]

You can use any of portfolio layouts on pages with any sidebars: left or right or both.

[/vc_column_text][/vc_column][vc_column width=”1/4″][gem_image position=”centered” disable_lightbox=”1″ src=”14327″][gem_divider][vc_column_text]

In Content

[/vc_column_text][vc_column_text]

Mix your content with portfolios. Place any portfolio layout on any position in content you wish.

[/vc_column_text][/vc_column][vc_column offset=”vc_hidden-sm vc_hidden-xs”][gem_divider margin_top=”70″][/vc_column][/vc_row][vc_row full_width=”stretch_row_content”][vc_column][vc_text_separator title_light=”1″ title_level=”h3″ title=”Grid Columns “][gem_divider margin_top=”50″][/vc_column][/vc_row][vc_row el_class=”custom-column”][vc_column width=”1/4″][gem_image position=”centered” disable_lightbox=”1″ src=”14346″][gem_divider][vc_column_text]

2x

[/vc_column_text][/vc_column][vc_column width=”1/4″][gem_image position=”centered” disable_lightbox=”1″ src=”14344″][gem_divider][vc_column_text]

3x

[/vc_column_text][/vc_column][vc_column width=”1/4″][gem_image position=”centered” disable_lightbox=”1″ src=”14342″][gem_divider][vc_column_text]

4x

[/vc_column_text][/vc_column][vc_column width=”1/4″][gem_image position=”centered” disable_lightbox=”1″ src=”14340″][gem_divider][vc_column_text]

5x

[/vc_column_text][/vc_column][vc_column offset=”vc_hidden-sm vc_hidden-xs”][gem_divider margin_top=”70″][/vc_column][/vc_row][vc_row full_width=”stretch_row_content”][vc_column][vc_text_separator title_light=”1″ title_level=”h3″ title=”Display styles”][gem_divider margin_top=”50″][/vc_column][/vc_row][vc_row el_class=”custom-column”][vc_column width=”1/2″ el_class=”custom-link-cols”][gem_textbox style=”picturebox” disable_lightbox=”1″ content_background_color=”#f0f3f2″ centered=”1″ picture=”31668″ content_text_color=”#3c3950″ padding_top=”50″ padding_bottom=”60″][vc_column_text]

Classic Styles

[/vc_column_text][vc_column_text]

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

[/vc_column_text][/gem_textbox][vc_raw_html css=”.vc_custom_1560155344650{margin-top: 0px !important;margin-right: 0px !important;margin-bottom: 0px !important;margin-left: 0px !important;padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 0px !important;padding-left: 0px !important;}”]JTNDYSUyMGNsYXNzJTNEJTIyY3VzdG9tLWxpbmslMjIlMjBocmVmJTNEJTIyaHR0cHMlM0ElMkYlMkZjb2RleC10aGVtZXMuY29tJTJGdGhlZ2VtJTJGZ3JpZC1leHRlbmRlZCUyRiUyMiUyMHRhcmdldCUzRCUyMl9ibGFuayUyMiUzRSUzQyUyRmElM0U=[/vc_raw_html][/vc_column][vc_column width=”1/2″][gem_textbox style=”picturebox” disable_lightbox=”1″ content_background_color=”#f0f3f2″ centered=”1″ picture=”31666″ content_text_color=”#3c3950″ padding_top=”50″ padding_bottom=”60″][vc_column_text]

Alternative Styles

[/vc_column_text][vc_column_text]

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

[/vc_column_text][/gem_textbox][vc_raw_html css=”.vc_custom_1560155545727{margin-top: 0px !important;margin-right: 0px !important;margin-bottom: 0px !important;margin-left: 0px !important;padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 0px !important;padding-left: 0px !important;}”]JTNDYSUyMGNsYXNzJTNEJTIyY3VzdG9tLWxpbmslMjIlMjBocmVmJTNEJTIyaHR0cHMlM0ElMkYlMkZjb2RleC10aGVtZXMuY29tJTJGdGhlZ2VtJTJGZ3JpZC1hbHRlcm5hdGl2ZSUyRiUyMiUyMHRhcmdldCUzRCUyMl9ibGFuayUyMiUzRSUzQyUyRmElM0U=[/vc_raw_html][/vc_column][vc_column offset=”vc_hidden-sm vc_hidden-xs”][gem_divider margin_top=”70″][/vc_column][/vc_row][vc_row full_width=”stretch_row_content”][vc_column][vc_text_separator title_light=”1″ title_level=”h3″ title=”Display Blog Post Details”][gem_divider margin_top=”50″][/vc_column][/vc_row][vc_row][vc_column width=”1/3″][gem_image position=”centered” disable_lightbox=”1″ src=”14363″][gem_divider margin_top=”3″][vc_column_text]

Below The Featured Image

[/vc_column_text][vc_column_text]

Show your chosen blog post captions like title, description, author below the featured image.

[/vc_column_text][/vc_column][vc_column width=”1/3″][gem_image position=”centered” disable_lightbox=”1″ src=”14361″][gem_divider margin_top=”3″][vc_column_text]

On Featured Image

[/vc_column_text][vc_column_text]

Show your chosen blog post details directly on featured image.

[/vc_column_text][/vc_column][vc_column width=”1/3″][gem_image position=”centered” disable_lightbox=”1″ src=”31684″][gem_divider margin_top=”3″][vc_column_text]

Along The Featured Image

[/vc_column_text][vc_column_text]

Alternative position for blog post details along the featured image.

[/vc_column_text][/vc_column][vc_column offset=”vc_hidden-sm vc_hidden-xs”][gem_divider margin_top=”70″][/vc_column][/vc_row][vc_row full_width=”stretch_row_content”][vc_column][vc_text_separator title_light=”1″ title_level=”h3″ title=”Hover Types “][gem_divider margin_top=”50″][/vc_column][/vc_row][vc_row][vc_column width=”1/6″][gem_image position=”centered” disable_lightbox=”1″ src=”14383″][vc_column_text]

Cyan Breeze

[/vc_column_text][/vc_column][vc_column width=”1/6″][gem_image position=”centered” disable_lightbox=”1″ src=”14381″][vc_column_text css=”.vc_custom_1458555745969{padding-right: 0px !important;padding-left: 0px !important;}”]

Zooming White

[/vc_column_text][/vc_column][vc_column width=”1/6″ css=”.vc_custom_1458555504558{padding-right: 0px !important;padding-left: 0px !important;}”][gem_image position=”centered” disable_lightbox=”1″ src=”14379″][vc_column_text]

Horizontal Sliding

[/vc_column_text][/vc_column][vc_column width=”1/6″][gem_image position=”centered” disable_lightbox=”1″ src=”14377″][vc_column_text]

Vertical Sliding

[/vc_column_text][/vc_column][vc_column width=”1/6″][gem_image position=”centered” disable_lightbox=”1″ src=”14374″][vc_column_text]

Gradient

[/vc_column_text][/vc_column][vc_column width=”1/6″ css=”.vc_custom_1458555522548{padding-right: 0px !important;padding-left: 0px !important;}”][gem_image position=”centered” disable_lightbox=”1″ src=”14372″][vc_column_text]

Circular Overlay

[/vc_column_text][/vc_column][vc_column offset=”vc_hidden-sm vc_hidden-xs”][gem_divider margin_top=”70″][/vc_column][/vc_row][vc_row full_width=”stretch_row_content”][vc_column][vc_text_separator title_light=”1″ title_level=”h3″ title=”Loading Mode & Pagination”][gem_divider margin_top=”50″][/vc_column][/vc_row][vc_row][vc_column width=”1/3″][gem_image position=”centered” disable_lightbox=”1″ src=”14397″][gem_divider margin_top=”3″][vc_column_text]

“Load More” Button

[/vc_column_text][/vc_column][vc_column width=”1/3″][gem_image position=”centered” disable_lightbox=”1″ src=”14395″][gem_divider margin_top=”3″][vc_column_text]

Infinite Scroll

[/vc_column_text][/vc_column][vc_column width=”1/3″][gem_image position=”centered” disable_lightbox=”1″ src=”14393″][gem_divider margin_top=”3″][vc_column_text]

Standard

[/vc_column_text][/vc_column][vc_column offset=”vc_hidden-sm vc_hidden-xs”][gem_divider margin_top=”70″][/vc_column][/vc_row][vc_row full_width=”stretch_row_content”][vc_column][vc_text_separator title_light=”1″ title_level=”h3″ title=”Loading animation”][gem_divider margin_top=”50″][/vc_column][/vc_row][vc_row][vc_column width=”1/6″][gem_image position=”centered” disable_lightbox=”1″ src=”14423″][gem_divider margin_top=”3″][vc_column_text]

Fade In

[/vc_column_text][/vc_column][vc_column width=”1/6″][gem_image position=”centered” disable_lightbox=”1″ src=”14421″][gem_divider margin_top=”3″][vc_column_text css=”.vc_custom_1458556199882{padding-right: 0px !important;padding-left: 0px !important;}”]

Fall Perspective

[/vc_column_text][/vc_column][vc_column width=”1/6″ css=”.vc_custom_1458555504558{padding-right: 0px !important;padding-left: 0px !important;}”][gem_image position=”centered” disable_lightbox=”1″ src=”14419″][gem_divider margin_top=”3″][vc_column_text]

Flip

[/vc_column_text][/vc_column][vc_column width=”1/6″][gem_image position=”centered” disable_lightbox=”1″ src=”14417″][gem_divider margin_top=”3″][vc_column_text]

Scale

[/vc_column_text][/vc_column][vc_column width=”1/6″][gem_image position=”centered” disable_lightbox=”1″ src=”14415″][gem_divider margin_top=”3″][vc_column_text]

Bounce

[/vc_column_text][/vc_column][vc_column width=”1/6″ css=”.vc_custom_1458555522548{padding-right: 0px !important;padding-left: 0px !important;}”][gem_image position=”centered” disable_lightbox=”1″ src=”14425″][gem_divider margin_top=”-3″][vc_column_text]

Move Up

[/vc_column_text][/vc_column][vc_column offset=”vc_hidden-sm vc_hidden-xs”][gem_divider margin_top=”140″][/vc_column][/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1559817142872{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;background-image: url(https://codex-themes.com/thegem-elementor/wp-content/uploads/2019/06/6.jpg?id=31702) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}” el_class=”custom-row”][vc_column offset=”vc_hidden-md vc_hidden-sm vc_hidden-xs” css=”.vc_custom_1559818113208{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}”][gem_divider margin_top=”40″][/vc_column][vc_column offset=”vc_hidden-lg vc_hidden-md” css=”.vc_custom_1559817410940{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}”][gem_divider margin_top=”0″][/vc_column][vc_column css=”.vc_custom_1559818205992{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}” offset=”vc_hidden-sm vc_hidden-xs”][gem_fullwidth padding_top=”0″ padding_bottom=”0″ padding_left=”0″ padding_right=”0″][vc_single_image image=”31698″ img_size=”full” el_class=”custom-img1″][vc_single_image image=”31696″ img_size=”full” alignment=”right” el_class=”custom-img2″][/gem_fullwidth][/vc_column][vc_column el_class=”big-index”][gem_icon pack=”elegant” size=”medium” centered=”1″ icon_elegant=”e035″ color=”#00bcd4″][gem_divider margin_top=”40″][vc_column_text]

BLOG Grid Settings

[/vc_column_text][gem_divider margin_top=”90″][vc_row_inner][vc_column_inner width=”1/3″][gem_list type=”check-style-2″ color=”3″]

  • Show / hide post titles & excerpts
  • Show / hide post date & categories
  • Choose blog categories
  • Define number of posts to be displayed
  • Enable / disable filters

[/gem_list][/vc_column_inner][vc_column_inner width=”1/3″][gem_list type=”check-style-2″ color=”3″]

  • Set any gaps size between posts
  • Show / hide name & date sorting
  • Asc. / desc. sorting options
  • Enable / disable likes
  • Enable / disable sharing

[/gem_list][/vc_column_inner][vc_column_inner width=”1/3″][gem_list type=”check-style-2″ color=”3″]

  • Define highlighted / featured /sticky posts
  • Enable / disable animation
  • Choose from 6 animation effects
  • Choose from 6 awesome hovers
  • Fancy titles or slideshow in header

[/gem_list][/vc_column_inner][/vc_row_inner][/vc_column][vc_column offset=”vc_hidden-md vc_hidden-sm vc_hidden-xs”][gem_divider margin_top=”200″][/vc_column][vc_column offset=”vc_hidden-lg”][gem_divider margin_top=”50″][/vc_column][/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1559812942412{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;background: #f0f3f2 url(https://codex-themes.com/thegem-elementor/wp-content/uploads/2019/06/4.jpg?id=31660) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}”][vc_column offset=”vc_hidden-md vc_hidden-sm vc_hidden-xs”][gem_divider margin_top=”130″][/vc_column][vc_column offset=”vc_hidden-lg”][gem_divider margin_top=”0″][/vc_column][vc_column][vc_row_inner equal_height=”yes” content_placement=”middle” css=”.vc_custom_1559813364987{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}” el_class=”custom-buttons”][vc_column_inner offset=”vc_hidden-lg vc_hidden-md”][gem_image position=”centered” disable_lightbox=”1″ src=”31662″][/vc_column_inner][vc_column_inner offset=”vc_col-lg-4 vc_col-md-4″][gem_button position=”center” style=”outline” size=”large” corner=”50″ border=”4″ icon_pack=”elegant” text=”buy now!” link=”url:https%3A%2F%2Fthemeforest.net%2Fitem%2Fthegem-creative-multipurpose-highperformance-wordpress-theme%2F16061685%3Fref%3DCodexThemes|||” text_color=”#eda36f” hover_text_color=”#ffffff” hover_background_color=”#eda36f” border_color=”#eda36f” hover_border_color=”#eda36f”][/vc_column_inner][vc_column_inner offset=”vc_col-lg-4 vc_col-md-4 vc_hidden-sm vc_hidden-xs”][gem_image position=”centered” disable_lightbox=”1″ src=”31662″][/vc_column_inner][vc_column_inner offset=”vc_col-lg-4 vc_col-md-4″][gem_button position=”center” style=”outline” size=”large” corner=”50″ border=”4″ icon_pack=”elegant” text=”learn more” link=”|||” text_color=”#6454fc” hover_text_color=”#ffffff” hover_background_color=”#6454fc” border_color=”#6454fc” hover_border_color=”#6454fc”][/vc_column_inner][/vc_row_inner][/vc_column][vc_column css=”.vc_custom_1559813638552{margin-top: 0px !important;padding-top: 0px !important;}”][vc_column_text]

the gem is awesome!

[/vc_column_text][vc_column_text]

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud exercitation

[/vc_column_text][/vc_column][vc_column offset=”vc_hidden-md vc_hidden-sm vc_hidden-xs”][gem_divider margin_top=”130″][/vc_column][vc_column offset=”vc_hidden-lg”][gem_divider margin_top=”50″][/vc_column][/vc_row]

Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.