The Extra Theme comes with a Blog Feed Masonry module, which lets you display a grid of posts. It is used, for example, on the default category layout of Extra-themed sites. The masonry grid lays posts out in columns with boxes for each post. As the height of each box is determined by characteristics of its post such as the length of its title and wrapping of its excerpt. This typically gives an uneven grid, with some post boxes being taller than others. Here’s how to make the posts in a Blog Feed Masonry module equal height, so the grid lines up in neat rows.

First, here’s an example of an uneven grid:

 As you can see, the box for the post on the right is shorter than the one on the left.

 To solve this, first we’ll add a CSS class of “equal-height-blog-feed-masonry” to the module (or modules) we want to modify so that we can apply changes just to those modules:

Now add the following CSS code to your site to equalize the heights:

/* === Equal height blog feed masonry module === */
/* Src: */

/* Min outer post height */
.equal-height-blog-feed-masonry article {
  min-height: 300px;

/* Min title height */
.equal-height-blog-feed-masonry article .post-title {
  min-height: 3.3em !important;

/* Min except height */
.equal-height-blog-feed-masonry article .excerpt p {
  min-height: 150px !important;

/* == END === */

To add the CSS code to Extra, paste it into Extra's custom CSS box, which you can find from your WordPress admin menu at "Extra > Theme Options > General > Custom CSS". Paste it after any other code already in there. Alternatively, you can place it in the style.css file of your child theme (if using).

The code sets a minimum height for the post boxes. If you set this large enough (e.g. to the height of your largest box), then all the boxes will be given the same height and line up neatly. Note that you may want to adjust the value used here to get something that looks right on your site.

The code then sets a fixed height for the title (enough to accommodate two-line titles), and for the excerpt, to make the content within the box line up more consistently. Again you may wish to adjust these values to suit your needs.

Here’s the result: