Fix Messy Image Grids With Divi 5 Aspect Ratio and Framing Settings

Affiliate disclosure: this article contains an affiliate link. If you buy Divi through it, we may earn a commission at no extra cost to you.

Every WordPress builder hits the same wall eventually: you drop different-sized images into a blog grid, a portfolio, or a row of product cards, and the layout looks ragged because one photo is landscape, the next is portrait, and a third is almost square. Divi 5 added three image settings that work together to fix this — Aspect Ratio, Image Framing, and Image Presets.

Why grids break in the first place

A grid only looks tidy when every cell holds an image of the same proportions. Real content rarely cooperates: a phone photo is 4:3, a screenshot is 16:9, a product shot is square. Without a forced ratio, each image keeps its own dimensions and the rows misalign — captions drift, cards grow to different heights, and the whole block looks unfinished. The fix is to stop trusting the source files and impose a consistent frame.

Aspect Ratio: lock the proportions

In Divi 5, Aspect Ratio is a field in the Sizing option group. It keeps an element's width and height in a fixed proportion as it scales. The common ratios and where they fit:

Set one ratio across a grid and every cell becomes the same shape, regardless of the original files — the rows align instantly.

Image Framing: decide what gets cropped

Locking the ratio raises a new question: what happens to an image whose real shape does not match the frame? That is what Image Framing controls, via the Fit option group. The Object Fit setting has three behaviors:

• Fill (default) — stretches the image to fill the frame. Fast but distorts anything that does not already match the ratio, so use it only when the source already fits.
• Contain — scales the image so the whole image is visible inside the frame, which can leave empty space around it.
• Cover — scales the image to completely fill the frame and crops the parts that do not fit. This is usually what you want for clean grids; combine it with position controls so the crop keeps the subject in view rather than chopping off heads.

For a uniform blog or product grid, the reliable recipe is a single Aspect Ratio plus Cover, with positioning nudged so the important part of each image survives the crop.

Image Presets: make it consistent and reusable

Divi 5 also adds Image Presets — full preset support for the Image option group. You can save a site-wide preset that bundles borders, shadows, filters, and framing, then apply it to every image module so brand styling stays consistent. Elegant Themes' guidance is to save an Image Preset early so those styles carry across every module that displays an image — set the ratio and Cover fit once, save it, and reuse it instead of re-configuring each grid by hand.

Responsive crop

Because Aspect Ratio and framing are responsive, you can give mobile a different ratio than desktop — a 16:9 hero on desktop might switch to 4:5 on phones so it does not shrink to a sliver. Tune the ratio per breakpoint rather than accepting whatever the desktop value does at narrow widths.

FAQ

Which setting actually fixes a messy grid?

Aspect Ratio (to force one shape) plus Object Fit set to Cover (to crop overflow cleanly). Image Presets then let you reuse that combination everywhere.

How do I stop Cover from cropping out the subject?

Adjust the image position within the frame so the focal point stays inside the visible area after cropping.

What's the difference between Contain and Cover?

Contain shows the whole image and may leave gaps; Cover fills the frame completely and crops the overflow. Grids almost always want Cover.

Bottom line

Mismatched image sizes are a layout problem with a settings-level fix in Divi 5: set one Aspect Ratio, use Cover framing with smart positioning, and save the combination as an Image Preset so every grid, portfolio, and product card lines up automatically.

Get Divi 5

Sources and further reading