Change normal grids to masonry grids

I'm currently creating a wordpress theme and so far all my code is working fine (my theme is based on the isotope js gallery), but I would like to transform my normal grids into masonry grids, could you help me?

Here's my code:

    ?php
/**
 *  gallery isotope
 *
 */
 ? 
div class="isotopewrapper customprimary"  

div id="filters" class="button-group" 
  button class="gallery-button btn from-top" data-filter="*"All/button
  ?php 
      $terms = get_terms("rt-ga-cat"); 
      $count = count($terms); 
      if ( $count  0 ){ 
        foreach ( $terms as $term ) { 
        $termname = strtolower($term-name);
      $termname = str_replace(' ','-', $termname);
        echo "button class=\"gallery-button\" data-filter='.".$termname."'" . $term-name . "/button\n";
        } 
    }    
  ?
/div

div class="grid ?php 
if ($gap == 'yes') { 
  echo 'gap';
}?"

?php
$args = array( 'post_type' = 'rt-gaf', 'posts_per_page' = $limit, 
'order' = $order, 'gap' = $gap,
'columns' = $columns );
$loop = new WP_Query( $args );
while ( $loop-have_posts() ) : $loop-the_post();

$terms = get_the_terms( $post, 'rt-ga-cat' );                       
  if ( $terms  ! is_wp_error( $terms ) ) : 
    $items = array();
      foreach ( $terms as $term ) {
        $items[] = $term-name;
      }
      $taxonomy_items = join( " ", str_replace(' ', '-', $items));          
      $taxonomy_items = strtolower($taxonomy_items);
      else :    
        $taxonomy_items = NULL;                 
      endif; 
?
div class="element-item 
    ?php 
    if ($columns == 1) { 
      echo 'element-item1 ';
    }
    elseif ($columns == 2) { 
      echo 'element-item2 ';
    }
    elseif ($columns == 3) { 
    echo 'element-item3 ';
    }
    else { 
    echo 'element-item2 ';
    }
    echo esc_attr( strtolower($taxonomy_items) );?"

      figure id="richart"
        ?php 
        echo the_post_thumbnail();
        ? 
        figcaption class="overlay"
          div class="text"
            h2?php echo the_title(); ?/h2
          /div
          a class="imagepopup" href="?php the_post_thumbnail_url();?"/a
        /figcaption 
      /figure

          p
            ?php echo the_excerpt(); ?
          /p

    /div 

    ?php endwhile; wp_reset_postdata(); ?

  /div 
/div

Topic masonry wp-query Wordpress javascript

Category Web


This is not really a Wordpress issue, you will have to play around with the CSS to get the layout you desire, if you take a look at isotope.js library you will see that hey have documentation on how to display Masonry grid https://isotope.metafizzy.co/layout-modes/masonry.html , and if that doesn't fit your needs you can learn more about Flexbox and do it yourself with some custom classes. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.