First insert the masonry posts shortcode

Set your image image size to load ‘wcsquare’ images. The default value for this image size is a 300×300 cropped image. You can make this bigger or smaller by changing your image size and regenerating your thumbnails. With the default size, I had to change my column size from 3 to 4 so that the images could span the full width of each masonry box. See the result below.

Now you will see that the title on one box is in only one line, and the title on another box is in two lines. You have two options here. You can change the title on every post so that they are all about the same length, or you can add this little snippet of CSS, and make everything one line.

body .wc-shortcodes-entry-title {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

Insert it in your Custom CSS box provided by your theme. On our newer themes, you can go to Appearance => Customizer, and insert it under the tab ‘Custom CSS’.

And then for your excerpt, you can either: Set a custom excerpt for each post that is about the same length. Or insert more custom CSS, and set a max height for your excerpt content.

Custom Excerpt

Custom CSS

body .wc-shortcodes-entry-summary {
    max-height: 80px;
    overflow: hidden;
}

The result will look something like this.