How to center last row items in product grid layout

[digimarket]

Hi, how can I make the products in the last row align to the center?
justify-content: center doesn’t seem to work.

Here’s the code:

.wd-grid-g {
    display: grid;
    grid-template-columns: repeat(var(--wd-col), minmax(0, 1fr));
    gap: var(--wd-gap);
}

Thanks!

• This topic was modified 4 days, 6 hours ago by digimarket.

Attachments:

You must be logged in to view attached files.

Hello,

In the default WooCommerce grid layout, products are displayed using a CSS grid system that fills items row by row. When the last row doesn’t have enough items to complete a full row (for example, 3 products in a 5-column layout), the remaining products will automatically align to the left — this is expected behavior with CSS Grid.

Unfortunately, justify-content: center won’t have any effect because it applies to the entire grid container, not individual incomplete rows.

Try to use this custom css code in Theme Settings > Custom CSS.

.wd-grid-g {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.wd-grid-g > * {
  flex: 0 0 calc(20% - var(--wd-gap));
  margin: calc(var(--wd-gap) / );
}

Best Regards.

Thank you!

Hello,

You’re Most Welcome!

Feel free to write back anytime. If you need further assistance, we are always here to help you.

If you have a minute, we’d truly appreciate your feedback — it helps us improve the product and shape future updates more effectively. We’d love your feedback on our theme: https://tally.so/r/w4l54k

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts