Hello There,
Thanks for updating in!
Masonry layout is using a JS script and not a css code. If you want to display masonry, you will have to modify the theme files itself so that the JS can be trigger. Because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.
Once you have your child theme active and ready, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file
<?php
// =============================================================================
// VIEWS/GLOBAL/_INDEX.PHP
// -----------------------------------------------------------------------------
// Includes the index output.
// =============================================================================
$stack = x_get_stack();
if ( is_home() ) :
$style = x_get_option( 'x_blog_style' );
$cols = x_get_option( 'x_blog_masonry_columns' );
$condition = is_home() && $style == 'masonry';
elseif ( is_archive() ) :
$style = x_get_option( 'x_archive_style' );
$cols = x_get_option( 'x_archive_masonry_columns' );
$condition = is_archive() && $style == 'masonry';
elseif ( is_search() ) :
$style = x_get_option( 'x_archive_style' );
$cols = x_get_option( 'x_archive_masonry_columns' );
$condition = is_search() && $style == 'masonry';
endif;
?>
<?php if ( $condition ) : ?>
<?php x_get_view( 'global', '_script', 'isotope-index' ); ?>
<div id="x-iso-container" class="x-iso-container x-iso-container-posts cols-<?php echo $cols; ?>">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php if ( $stack != 'ethos' ) : ?>
<?php x_get_view( $stack, 'content', get_post_format() ); ?>
<?php else : ?>
<?php x_ethos_entry_cover( 'main-content' ); ?>
<?php endif; ?>
<?php endwhile; ?>
<?php else : ?>
<?php x_get_view( 'global', '_content-none' ); ?>
<?php endif; ?>
</div>
<?php else : ?>
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php x_get_view( $stack, 'content', get_post_format() ); ?>
<?php endwhile; ?>
<?php else : ?>
<?php x_get_view( 'global', '_content-none' ); ?>
<?php endif; ?>
<?php endif; ?>
<?php pagenavi(); ?>
3] Save the file named as _index.php
4] Upload this file to your server in the child theme’s folder wp-content/themes/x-child/framework/views/global/ or wp-content/themes/pro-child/framework/views/global/ if you are using Pro theme.
Hope this helps.