How to display wordpress posts in three columns?

Question

Seems like a silly question, but I can't display posts in three columns.

I was using this code with bootstrap, but I can't anymore because it somehow breaks other parts of my page. I had to change it.

<div class="row" style="margin-top:-30px">
    <?php 
        $count=0; 
        query_posts('posts_per_page=9'); 
        while (have_posts()) : the_post(); 
    ?>
    <div class="col-sm-4 blog-post thumb">
        <?php get_template_part('content-noticias', get_post_format()); ?>
    </div>
    <?php 
        $count++; 
        if($count == 3 || $count == 6 ) echo '</div><div class="row">';
        endwhile;
    ?>
</div>

It would do the work, but not anymore because of that. How to display my posts in columns without bootstrap? Just for information, my content-noticias is:

<div class="noticias">
    <a href="<?php the_permalink(); ?>"> <?the_post_thumbnail();?> </a>

    <h1 style="margin-top:-30px"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>

    <div><p><?php echo wp_trim_words( get_the_content(), 50 ); ?></p></div>
  </div>
</div>

Answer 1

Hey man for row you can use css property flex-flow: row wrap; and for child items flex-basis: 33%; and any of your items in your post loop will be in 3 columns , and you can change flex basis for other mediaquery for change sie on mobile for example, check this out !

 .container { max-width: 1335px; margin: 0 auto; } .grid-row { display: flex; flex-flow: row wrap; justify-content: flex-start; } .grid-item { height: 250px; flex-basis: 33%; -ms-flex: auto; width: 250px; position: relative; padding: 10px; box-sizing: border-box; background-color: #ededed; border: 1px solid white; } @media(max-width: 1333px) { .grid-item { flex-basis: 33.33%; } } @media(max-width: 1073px) { .grid-item { flex-basis: 33.33%; } } @media(max-width: 815px) { .grid-item { flex-basis: 33%; } } @media(max-width: 555px) { .grid-item { flex-basis: 100%; } } 

 <div class='container'> <div class='grid-row'> <div class='grid-item'> <div class="noticias"> <a href="<?php the_permalink(); ?>"> <?the_post_thumbnail();?> </a> <h1 style="margin-top:-30px"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1> <div> <p> <?php echo wp_trim_words( get_the_content(), 50 ); ?> </p> </div> </div> </div> <div class='grid-item'> <div class="noticias"> <a href="<?php the_permalink(); ?>"> <?the_post_thumbnail();?> </a> <h1 style="margin-top:-30px"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1> <div> <p> <?php echo wp_trim_words( get_the_content(), 50 ); ?> </p> </div> </div> </div> <div class='grid-item'> <div class="noticias"> <a href="<?php the_permalink(); ?>"> <?the_post_thumbnail();?> </a> <h1 style="margin-top:-30px"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1> <div> <p> <?php echo wp_trim_words( get_the_content(), 50 ); ?> </p> </div> </div> </div> <div class='grid-item'> <div class="noticias"> <a href="<?php the_permalink(); ?>"> <?the_post_thumbnail();?> </a> <h1 style="margin-top:-30px"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1> <div> <p> <?php echo wp_trim_words( get_the_content(), 50 ); ?> </p> </div> </div> </div> <div class='grid-item'> <div class="noticias"> <a href="<?php the_permalink(); ?>"> <?the_post_thumbnail();?> </a> <h1 style="margin-top:-30px"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1> <div> <p> <?php echo wp_trim_words( get_the_content(), 50 ); ?> </p> </div> </div> </div> <div class='grid-item'> <div class="noticias"> <a href="<?php the_permalink(); ?>"> <?the_post_thumbnail();?> </a> <h1 style="margin-top:-30px"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1> <div> <p> <?php echo wp_trim_words( get_the_content(), 50 ); ?> </p> </div> </div> </div> </div> </div> 

Answer 2

The problem is in your $count if statement:

if($count == 3 || $count == 6 ) echo '</div><div class="row">'; <-- THIS WILL NEVER CLOSE

What you can do is this:

<div class="row" style="margin-top:-30px">
    <?php 
        query_posts('posts_per_page=9'); 
        while (have_posts()) : the_post(); 
    ?>
    <div class="col-sm-4 blog-post thumb">
        <?php get_template_part('content-noticias', get_post_format()); ?>
    </div>
    <?php endwhile;?>
</div>

Then you can use CSS to make sure your columns stay intact:

.row .blog-post:nth-child(3n+1) {
    clear: left;
}

That will make sure that every third element will clear so if one of the columns is longer or shorter, it won't mess with the layout.