How to Make Divi Blog Grid Cards Equal Height (Pure CSS Solution 2026)

The native Divi Blog Module is widely used by WordPress developers and site owners to display recent articles in a modern grid layout. However, out of the box, Divi relies on a legacy masonry layout engine (Salvattore). When your blog posts feature titles of differing lengths, varying excerpt sizes, or unequal image dimensions, the cards misalign vertically, creating an unprofessional, jagged visual appearance.

While some tutorials suggest heavy third-party plugins or complex jQuery calculations that cause layout shifts on page load, the cleanest, fastest, and most future-proof fix is pure CSS Flexbox. At CV World, we believe in zero-bloat web development. In this step-by-step developer guide, we provide the exact CSS code to achieve pixel-perfect, equal-height Divi blog cards in 2026.

1. The Root Cause: Why Divi Blog Grid Cards Misalign

Divi’s default blog module layout suffers from two structural constraints:

1. Masonry Multi-Column Heights: Divi uses absolute positioning or masonry columns that flow cards naturally based on their unique inner content height. If Post A has a 3-line title and Post B has a 1-line title, Post A will be noticeably taller.
2. Floating Read More Links: Buttons and metadata sit immediately beneath the excerpt. Without flex alignment, read-more buttons float at random vertical heights across adjacent columns.

2. Step 1: Add a Custom CSS Class to Your Divi Blog Module

1. Open your page inside the Divi Visual Builder.
2. Click the Gear icon on your Blog Module to open module settings.
3. Navigate to the Design → Layout tab and ensure the layout is set to Grid (not Fullwidth).
4. Switch to the Advanced tab.
5. Under CSS ID & Classes → CSS Class, enter: cvw-equal-blog.
6. Click the green checkmark and Save the page.

3. Step 2: The Pure CSS Flexbox Solution

Navigate to Divi → Theme Options → General → Custom CSS (or place this in your Divi child theme stylesheet) and paste the following snippet:

/* ============================================================
   CV World: Equal Height Divi Blog Grid Cards (Pure CSS Flexbox)
   ============================================================ */

/* 1. Transform the column container into a uniform Flex layout */
.cvw-equal-blog .et_pb_salvattore_content {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 30px !important;
}

/* 2. Standardize column widths across desktop viewports */
.cvw-equal-blog .et_pb_salvattore_content > .column {
  flex: 1 1 calc(33.333% - 20px) !important;
  max-width: calc(33.333% - 20px) !important;
  margin-right: 0 !important;
}

/* 3. Force each article card to expand to 100% column height */
.cvw-equal-blog article.et_pb_post {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* 4. Equalize featured image container aspect ratios */
.cvw-equal-blog article.et_pb_post .entry-featured-image-url {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
}

.cvw-equal-blog article.et_pb_post .entry-featured-image-url img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* 5. Push the 'Read More' button to the bottom edge of the card */
.cvw-equal-blog article.et_pb_post .more-link {
  margin-top: auto !important;
  align-self: flex-start !important;
  display: inline-block !important;
}

/* 6. Tablet Breakpoint: 2 Cards per row */
@media (max-width: 980px) and (min-width: 768px) {
  .cvw-equal-blog .et_pb_salvattore_content > .column {
    flex: 1 1 calc(50% - 15px) !important;
    max-width: calc(50% - 15px) !important;
  }
}

/* 7. Mobile Breakpoint: 1 Full-width Card per row */
@media (max-width: 767px) {
  .cvw-equal-blog .et_pb_salvattore_content > .column {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}

4. How the Code Works Mechanically

• display: flex; flex-direction: column;: Converts the post card into a vertical flex container where children (thumbnail, title, meta, excerpt, button) stack naturally.
• height: 100%;: Forces all post elements within the same row to match the height of the tallest card in that row.
• aspect-ratio: 16 / 9; object-fit: cover;: Guarantees that regardless of whether your uploaded post images are vertical portraits or horizontal landscapes, they fill a uniform 16:9 box without stretching.
• margin-top: auto; on .more-link: Flexbox trick that absorbs all remaining vertical whitespace above the button, docking every “Read More” button cleanly at the bottom margin.

Divi Equal Height Solution: Pure CSS vs JavaScript Equalizer

5. Compatibility with Divi AJAX Pagination

JavaScript solutions often break when visitors click page 2 or 3 of the blog grid because new posts are loaded via AJAX without triggering window resize events. Because this solution is 100% pure CSS, it applies immediately and flawlessly across all paginated pages with zero layout flicker or Cumulative Layout Shift (CLS).

Need custom WordPress theme development, Divi child theme architecture, or Core Web Vitals speed optimization? Discover our full range of WordPress development services at CV World.

Frequently Asked Questions