Post Grid styling

You can create a great looking, column-based grid of posts with a bit of CSS.

The next version of Display Posts will make it even easier to add a grid of posts. We’re building a custom block for the new content editor (Gutenberg) that will allow you to select different layout options.

Example

Shortcode

[display-posts image_size="medium" wrapper="div" wrapper_class="display-posts-listing grid" meta_key="_thumbnail_id"]
  • Use the image_size parameter to define what size image to use. You can use the WordPress core image sizes (thumbnail, medium, large) or any custom image sizes added by your theme.
  • Set wrapper="div" so the posts aren’t in a list.
  • Set wrapper_class="display-posts-listing grid" so we can add CSS targeted to just this listing rather than all of them.
  • [Optional] set meta_key="_thumbnail_id" to exclude posts that don’t have featured images.
  • Set posts_per_page to the number of articles you’d like to include. Pick a number that divides well across all breakpoints.

CSS

This code snippet goes in Appearance > Customize > Additional CSS or your theme’s stylesheet.

/* Grid style */
.display-posts-listing.grid {
	display: grid;
	grid-gap: 16px;
}

.display-posts-listing.grid .title {
	display: block;
}

.display-posts-listing.grid img { 
	display: block; 
	max-width: 100%; 
	height: auto; 
}

@media (min-width: 600px) {
	.display-posts-listing.grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media (min-width: 1024px) {
	.display-posts-listing.grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}
  • You can modify the @media (min-width: xxx)to change when the number of columns change.
  • You can modify the repeat( X, 1fr ) to set the number of columns at that breakpoint.
  • Modify the grid-gap to change the space between rows and columns.

Published by Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributor to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Join the Conversation

  1. I have a problem.

    If I want to set only 1 row and use de large image, when the image its on mobile or the window its small the image doesn’t act responsive… Look stretch…

    1. It sounds like your theme does not include CSS for responsive images. I’ve updated the CSS above to fix this.

  2. Great, I’ve used this new code instead of your old columns plugin and it works great. I didn’t even know about css grids.

  3. Dear Bill,
    Thanks for the plugin. I am currently using it (I am far from being a WP pro).

    1/
    I used the above CSS code and I got an error saying “expecting RBRACE at line xxx”. The lines in question are where .display-posts-listing.grid { is used in the following code
    I wonder it is would harm the website if I save it with that error.

    @media (min-width: 600px) {
    .display-posts-listing.grid {
    grid-template-columns: repeat( 2, 1fr );
    }
    }

    @media (min-width: 1024px) {
    .display-posts-listing.grid {
    grid-template-columns: repeat( 3, 1fr );
    }
    }

    2/ I have another question. I have a dash between the title and the excerpt when I use the following shortcode. I would like to remove it but have no clue how 🙂
    I am using the CSS code you wrote in the post “”image aligment” for left alignment
    .display-posts-listing.image-left .listing-item {
    overflow: hidden;
    margin-bottom: 32px;
    width: 100%;
    }

    .display-posts-listing.image-left .image {
    float: left;
    margin: 0 16px 0 0;
    }

    .display-posts-listing.image-left .title {
    display: block;
    }

    .display-posts-listing.image-left .excerpt-dash {
    display: none;
    }

    1. Your CSS looks good to me! I think the automated validation tool doesn’t work with media queries – it’s not expecting an opening brace inside another opening brace.

      The last bit of that CSS ( `.display-posts-listing.image-left .excerpt-dash { display: none; }` ) should be hiding the dash for you. Are you using the latest version of Display Posts? The 5.0 release added the .excerpt-dash class so you could target it with CSS.

          1. I just checked your site and it has the .excerpt-dash class applied to the dash, so the CSS you mentioned above should work to remove it.

            .display-posts-listing.grid .excerpt-dash { display: none; }
  4. This works fantastically! Thank you! I am just now implementing your plug-in now that I am contemplating abandoning Easy Index. Your documentation is much appreciated.

    Mike

  5. hi bill,
    i copied your css code and it returned: 1 invalid setting
    grid-template-columns: shows an X sign

    how shud i proceed?

    thank you!

    1. It’s fine, just click save. The validator built into WordPress core hasn’t kept up with modern CSS and doesn’t know all the grid parameters.

  6. Hi,
    I use version 3.0.1.
    Is there a (a) method to limit the amount of posts displayed and (b) to paginate if there are more posts than displayed?
    Rhanks

    1. You can use the posts_per_page parameter to set the maximum number of posts displayed. Ex: [display-posts posts_per_page="5"] will display the 5 most recent posts.

      This plugin does not currently support pagination, but it’s a feature under consideration for a future release. You can find out more about it here.

    1. It looks like everything on that page is wrapped in a <code> element which is adding the grey boxes. Try editing the HTML of that page. I’m guessing you’ll see the code tag wrapping around the display posts shortcode. Remove it and everything should be fixed.

  7. Bill, I am also getting an error “expecting RBRACE at …” as mentioned above, but also “unable to save due to 1 invalid setting”. Any suggestions?
    Thanks!

    1. It sounds like you’re missing a brace (either { or } ). Try re-entering the styles shown above.

      1. I copied and pasted your code from above again, but no dice.
        Still getting the error “expected RBRACE at line 72, col 37” and a second error “expected RBRACE at line 78, col 37” and “unable to save due to 1 invalid setting”

        Any further suggestions? Thanks!

      2. Oh sorry, yes I just checked and you’re right, the WordPress CSS validator does say that. But it’s not an actual issue, it’s WP’s validator not knowing about the CSS function repeat().

        You can click “Update anyway, even though it may break your site” and save the CSS (screenshot).

        1. Thanks Bill. It seems to have taken it and clearly didn’t break the site, but I have a little work to do…
          Thanks for your speedy support and the great plug in!

  8. PS, the lines that are looking for the RBRACE refer to the “grid-template-columns” styling code line “grid-template-columns: repeat(“

  9. Bill, I’m making progress, and things are looking pretty good. I even figured out how to use Code Snippets to format my titles. (Thanks for that!) But my category code doesn’t seem to be working – all posts are showing up rather than just the selected category. Any thoughts? This is my shortcode:
    [display-posts  image_size="dara-hero-thumbnail"  wrapper="div"  wrapper_class="display-posts-listing grid" display posts include_excerpt="true"  post_title_as_h2="true" include_excerpt_dash="false" post_category="insights" category_display="post_tag” = display tags]

    Thanks Bill,
    C.

  10. There’s a few issues I see with that shortcode:
    – extraneous display posts and = display tags added in there
    post_title_as_h2 and post_category are not available parameters

    Try using this shortcode instead:

    [display-posts image_size="dara-hero-thumbnail" wrapper="div" wrapper_class="display-posts-listing grid" include_excerpt="true" include_excerpt_dash="false" category="insights" category_display="post_tag”]

  11. Found my code error and am now displaying tags.
    I would like the tag to appear on a line by itself, with the excerpt starting on the next line, and would like to suppress the “Posted in:” before each tag. Do I do that with CSS? If so, what do you advise?
    Thanks for all your timely support!
    C.

    1. You can add the following CSS to display the tags on a separate line: .display-posts-listing .category-display { display: block; }

Leave a comment

Your email address will not be published. Required fields are marked *