How to display wordpress posts in three columns? - php

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">
<?the_post_thumbnail();?>
<h1 style="margin-top:-30px"><?php the_title(); ?></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"><?php the_title(); ?></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"><?php the_title(); ?></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"><?php the_title(); ?></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"><?php the_title(); ?></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"><?php the_title(); ?></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"><?php the_title(); ?></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.