Grid with loop breaks in wordpress! Foundation6 usage as framework

Question

Good afternoon, I have been having many problems when doing a grid with loop, as the posts of a blog in grid, follows an illustration image: http://i.imgur.com/Bnz2jb9.png

Does anyone know what to do to keep the grid from breaking? Follows the code:

<!-- the loop -->           
        <?php while ( $custom_query->have_posts() ) : $custom_query->the_post(); ?>

          <article class="loop large-6 columns text-center">
            <div class="img-post"><a href="<?php the_permalink();?>"><?php the_post_thumbnail('medium-large', array( 'alt' => get_the_title(), 'title' => get_the_title() ) ); ?></a></div><br>
            <div class="titulo-post medium-11 medium-centered"><h2><strong><a href="<?php the_permalink();?>"><?php the_title(); ?></a></strong></h2></div>             
            <div class="content medium-10 medium-centered text-justify">
              <!--?php the_excerpt(); ?-->
              <a href="<?php the_permalink();?>"><div class="text-center"><button class="button">LEIA MAIS</button></a></div><br><br><br>
          </article>

        <?php endwhile; ?>
        <!-- end of the loop -->

Answer 1

You have a few ways to do this. Using a type grid plugin that

If the grid is always the same size, you can set a fixed height. In the code you put miss a div with the class 'Row' to make the lines. It is also important as you can see here