Snippet / Theme Options > Custom CSS with a row, section, or Code module wrapper class

Responsive CSS Grid Card Layout

A true auto-fit and minmax() card grid for Divi layouts that need more flexible wrapping than fixed columns.

Use this for repeatable cards where the number of columns should adapt naturally to the available width.

.dfy-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 22px;
}

.dfy-card-grid > * {
  min-width: 0;
}

.dfy-card-grid .et_pb_module {
  height: 100%;
}

Masonry Variant

CSS columns can mimic masonry for image-heavy cards.

.dfy-card-masonry {
  column-count: 3;
  column-gap: 22px;
}

.dfy-card-masonry > * {
  break-inside: avoid;
  margin: 0 0 22px;
}

@media (max-width: 980px) {
  .dfy-card-masonry {
    column-count: 2;
  }
}

@media (max-width: 640px) {
  .dfy-card-masonry {
    column-count: 1;
  }
}

Notes

This works best in a Code module or in custom markup inside a Theme Builder template.
If using Divi modules inside regular rows, confirm Divi column widths are not fighting the grid wrapper.

Sources