Grid layout with equal size grid

Hi there,

first off Disable the Masonry option, then share a link to your site where i can see the columns and ill advise on how to make them the same height.

Hi David, here - https://www.shippingandfreightresource.com/.. Also let me know about the 2nd point of the Categories.. Thanks..

So are you wanting to move the Go to full article to the bottom of the post grid in each post?

Hi Leo, I want it like this https://blog.adobe.com/ where all the grids are the same size with fixed character limit in excerpts..

Hi there,

Have you tried the layout > blog > archive > Excerpt word count?
https://docs.generatepress.com/article/blog-content-layout/#archives

Let me know :)

Hi Ying, that restriction is there, but doesn't reflect on the page..

Just to be sure that the excerpts are not added manually at Post Editor > Screen Options > check Excerpt?
Thanks!

It is manually added

Hi GP team, can someone help with this topic, has been going on for a few days.. I think I have explained the issue clearly as well.. Further to Ying's comments above, I have removed manual excerpts from two of the posts and left it at 30 word count in layout options..

But still the boxes are not of the same size because title, meta info could vary in size as per
this image..

I want the boxes to stay same size irrespective of the content inside (within the word count) like in this image from Adobe's blog..

Also I wanted 1 grid per category that I have so the home page shows each category in a box and not each post.. Pls help..

1. WordPress only filters the length of an automatic excerpt. Manual Excerpts will display whatever you add as their content. Aside of editing each manual excerpt, or removing them, you can try adding this PHP Snippet to trim Manual Excerpts.

add_filter( 'get_the_excerpt', function( $excerpt, $post ) {
    if ( has_excerpt( $post ) ) {
        $excerpt_length = apply_filters( 'excerpt_length', 55 );
        $excerpt_more   = apply_filters( 'excerpt_more', ' ' . '[…]' );
        $excerpt        = wp_trim_words( $excerpt, $excerpt_length, $excerpt_more );
    }
    return $excerpt;
}, 10, 2 );

With that in place we can look at the rest of the layout - but your site is considerably different to Adobe so we many not able to replicate that exact look.

2. Primary Category is not a feature of WordPress - I assume you're using Yoast to generate the Primary Category ? If so - this is the only article i have found to GET their Primary Category for display purposes:

https://www.tannerrecord.com/how-to-get-yoasts-primary-category/

The author provides more detail in his GIST on how to get the category for displaying in a theme:

https://gist.github.com/tarecord/4c7171b9955aee41d91db133af3e1d8f

Hi David, code for trimming the manual excerpts worked.. So now the excerpt will be same level, but if the title is 2 lines or 3 lines then the meta box alignment varies.. Can you pls have a look at the image and tell me how to align the meta box so it is on the same level.. Then everything will be fine - meta box will be same level as the next grid cell and the excerpts will be same line.. Only difference will be the heading..

https://www.shippingandfreightresource.com/wp-content/uploads/gridsize1.png

Couple of things - first is to set a max/min height of the images and then force the containers to be the same height:

@media(min-width: 769px) {
  .generate-columns .inside-article .post-image img {
    min-height: 150px;  
    max-height: 150px;
    width: auto;
  }
  
  .generate-columns:not(.featured-column) .inside-article {
    display: flex;
    flex-direction: column;
  }
}

Are you going to keep the Featured Column post ? As this complicates this design.

Note you can reduce the space between images / title / summary by changing the Content Separator
in Customizer > Layout > Container.

Hi David, i put the code in the CSS.. Post-images are not resizing to 150x150.. It is still maintaining original size..

Hmmm... that should work fine. But i updated the CSS above to make it a little more specific.