Modern Grid with square images

Modern Grid is designed for panoramic images. Classic Grid is recommended if you are using square images.

How to add Modern Grid support for square images?

It’s quite simple but requires to add a custom CSS rules:

.modern-grid-element .pseudo {
padding-top: 100%;
}

.product-subcategories .al_archive img.higher.rect,
.product-list .al_archive img.higher.rect, .al_archive img.higher.rect {
margin-top: 0;
}

You can use your theme CSS file or a custom CSS plugin to insert the above code.

Please note that it will only work nicely if all your images are squares where width equals height.

Override the image crop behavior

As an addition you should go to WordPress Settings > Media and change the Modern Grid Image max sizes to the same value.

See how to find out the best product image size.

Start with modern grid with square images here for free