Snippet / Theme Options > Custom CSS and Blog module CSS class

Equal-Height Divi Blog Cards

A CSS Grid helper for making Divi Blog module cards align cleanly when excerpts and titles have uneven lengths.

Add dfy-blog-equal-cards to the Blog module when using grid/card style layouts.

.dfy-blog-equal-cards .et_pb_post {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  height: 100%;
}

.dfy-blog-equal-cards .post-content {
  display: grid;
  align-content: start;
}

.dfy-blog-equal-cards .more-link {
  align-self: end;
  margin-top: 1rem;
}

@media (min-width: 981px) {
  .dfy-blog-equal-cards .et_pb_ajax_pagination_container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}

Notes

• Divi Blog module markup varies with layout settings, so inspect the generated class names before shipping.
• Keep excerpts similar in length where possible; CSS should polish the grid, not hide weak editorial structure.

Sources

• https://www.peeayecreative.com/blog/
• https://www.peeayecreative.com/divi/
• https://wpzone.co/blog/snippet-category/divi-modules/