Prevent product grid from scaling single product if fewer than three

Store Design
, , , ,

Topic summary

A user encountered an issue where products in a 3-column grid were scaling up to fill the full page width when fewer than three products appeared in the final row.

Root Cause Identified:

  • CSS code in base.css contained max-width: 100%!important on .grid__item
  • The !important declaration was overriding the grid layout and forcing items to expand
  • Invalid media query syntax was also present

Solution Provided:

  • Remove !important from the max-width: 100% declaration
  • Fix the malformed media query syntax
  • If targeting mobile devices, use max-width: 749px instead of min-width: 750px

Outcome: The solution successfully resolved the scaling issue, keeping all products at consistent sizes regardless of row position.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

I have set a product grid to be 3 products wide. The issue is that if there are fewer than three products (at the end of the page), it scales the products up to fill the page width. How can I prevent this and just keep all the products the same size, regardless of how many there are on a row?

https://0c1554-d6.myshopify.com/collections/all?filter.v.option.finish=Aged

pw ronnie

2

@elmeto Hey, thanks for posting here.
i think you are missing the grid setting.

please review it again I hope there’s an option to sort it as same size, not collage.

3

Hi @elmeto

Welcome to the community.

It looks like some CSS code issue. At the end of base.css you have

.grid__item {
    max-width: 100%!important;
}

And that is causing last one to go full with. Using !important is not recommended as it messes with flow of code. So try to just remove “!important” and your grid should look fine.

Also, I saw you have

@media screen and (min-width: 750px) .grid__item {
    max-width: 100% !important
}

That is not a valid code plus it would again make it last full width. MAybe you wanted to target mobile devices then code would be :

@media screen and (max-width: 749px) {
    .grid__item {
        max-width: 100% !important
    }
}

Good luck

4

This worked, thank you so much!

1 Like