Grid vieew for posts


#1

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?


#2

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;
}

#3

Thanks, this worked great! And so easy <3


#4

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.


#5

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; ?>