Masonry Grid

CSS

/* Masonry container */
.masonry-blog {
	-moz-column-count: 4;
	-webkit-column-count: 4;
	column-count: 4;
	-moz-column-gap: 1em;
	-webkit-column-gap: 1em;
	column-gap: 1em;
	max-width: 1000px;
	margin: 0 auto;
}

/* Masonry bricks or child elements */

.masonry-blog article {
	display: inline-block;
	margin: 0 0 1em;
	width: 100%;
	position: relative;
}

@media only screen and (max-width : 1024px) {
	.masonry-blog { /* Masonry container */
	-moz-column-count: 3;
	-webkit-column-count: 3;
	column-count: 3;
	}
}

@media only screen and (max-device-width : 1024px) and (orientation : portrait) {
	.masonry-blog { /* Masonry container */
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2;
	}
}

@media only screen and (max-width : 768px) {
	.masonry-blog { /* Masonry container */
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2;
	}
}

@media only screen and (max-width : 480px) {
	.masonry-blog { /* Masonry container */
	-moz-column-count: 1;
	-webkit-column-count: 1;
	column-count: 1;
	}
}

PHP

<div class="masonry-blog">
  <div class="wrap-1">
    <?php
    $args = array(
    'posts_per_page' => 8,
    'post_type' => 'post'
    );
    $query = new WP_Query( $args );
    ?>


    <?php if ( $query->have_posts() ) : ?>

      <?php while ( $query->have_posts() ) : $query->the_post(); ?>

        <article class=”post”>
          <?php if (get_field('text_position') == 'inside-text'): ?>
            <div class="post-content small text <?php echo get_field('text_position'); ?>">
              <?php the_excerpt(); ?>
            </div>
          <?php endif; ?>
          <a href="<?php the_permalink(); ?>">
            <?php if( get_the_post_thumbnail() ) : ?>
              <?php the_post_thumbnail('small'); ?>
            <?php endif; ?>
          </a>
          <!--<h3 class="title">
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
          </h3>-->
          <?php if (get_field('text_position') == 'outside-text'): ?>
            <div class="post-content small text <?php echo get_field('text_position'); ?>">
              <?php the_excerpt(); ?>
            </div>
          <?php endif; ?>
          <a class="title" href="<?php the_permalink(); ?>">Read More</a>
        </article>

      <?php endwhile; ?>

      <?php
      previous_posts_link('&laquo; Newer posts');
      next_posts_link( 'Older posts &raquo;', $query->max_num_pages );
      ?>

      <?php //wp_reset_postdata(); ?>

    <?php else : ?>
      <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
    <?php endif; ?>

  </div>
</div>