Uneven grid display for post entries (masonry)

I am displaying my blog posts using the grid (masonry) option. However the posts display in a way that looks very messy on the website, regardless of which browser is used. Because the heading lengths are different sizes, some entries appear longer than others which in turn impacts the next row in the grid.

Is this away that this can appear more tidy with all blog entries starting at the same level per row? I don’t mind if it means text gets chopped off.

Also, I would like at least 20 blog entries to be visible on the home page, how can I do this?
Thanks

The page I need help with: [log in to see the link]