Grid vieew for posts

Hello everyone!
I am building right now my first wordpress theme with roots and it’s a lot of fun.

Well I am aiming for a grid view for the posts. It should only show the featured image and the title.
Actually I got it working exactly like I wanted it.

But… I think I cheated a bit. I set the featured image height and width to the value I wanted and then in the app.less file:

    .post {
   float:left;
   width: 270px;
   margin: 0 5px 0 0;
}

Okay my problem know, as you can imagine is, that if I click on the post, it still keep the 270px width.

Is there an easy solution to get the grid view I wanted but with full width content?

Sure. You’ll want to adjust the CSS specificity so that those rules only apply on your index page. So, if each row of the grid is in a div classed ‘grid-row’, you’d adjust your css like this:

.grid-row .post {
   float:left;
   width: 270px;
   margin: 0 5px 0 0;
}

or if it’s on your homepage only, this might work:

body.home .post {
   float:left;
   width: 270px;
   margin: 0 5px 0 0;
}
1 Like

Thanks, this worked great! And so easy <3

how to show posts in grid view in Sage 8.5 ? Modifying template/content.php. Does anybody have this? It’s still in list for me.

ok. done

<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<?php $num = 0; ?>

  <article <?php post_class(); ?>>
      <?php if (has_post_thumbnail()) { the_post_thumbnail('medium'); } ?>
  <h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
  <div class="entry-summary">
    <?php the_excerpt(); ?>
  </div>
  </article>

  <?php $num++; ?>
  <?php if ($num == 4) : ?>
    <?php $num = 0; ?>
    </div>

  <?php endif; ?>