How to center last row items in product grid layout
-
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 9 months 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.
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.
The topic ‘How to center last row items in product grid layout’ is closed to new replies.
.
