Aligning Last Size Box Grid - Dawn Theme

Shopify Discussion

Topic summary

A user is experiencing alignment issues with a size grid in the Dawn theme where the last box appears misaligned when fewer than 6 items fill a row. The grid displays correctly with exactly 6 items but creates width inconsistencies with fewer items.

Initial Setup:

  • Using CSS Flexbox for the size grid layout
  • Problem occurs across different screen sizes and devices
  • Last box in incomplete rows appears wider than others

Attempted Solution:
Another user suggested switching from Flexbox to CSS Grid with:

  • display: grid
  • grid-template-columns: repeat(auto-fit, minmax(80px, 1fr))
  • box-sizing: border-box on buttons
  • Proper gap spacing

Current Status:
The issue persists after implementing the Grid solution. The original poster suspects the 1fr value causes the last column to stretch when extra space exists, even though items appear uniform in width. Code snippets and screenshots were shared showing the implementation and the misalignment problem.

The discussion remains unresolved with the user seeking additional guidance on fixing the responsive grid alignment.

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

Hi everyone,

I’m facing an issue with my size grid where the last size box is not properly aligned with the rest of the items. It appears slightly off in terms of width, causing misalignment at the end of the grid. I need the size grid to be compatible across all screen sizes and devices, and I want to ensure the grid looks consistent on both desktop and mobile views.

Here’s the relevant part of my base.css file:

carbon (3).png
carbon (3).png1918×1712 232 KB

Despite using this, the last size box (when fewer items are in a row, such as 3 or 4 instead of 6) is slightly misaligned, creating gaps at the end of some rows.

Could someone suggest how to make the size grid fully responsive, ensuring proper alignment across all screen sizes and devices?

Thank you in Advance.

2

Hello. :slightly_smiling_face:

If you don’t need Flexbox’s one-dimensional flow, set the display to grid and use box-sizing: border-box to include any border and/or padding in its sizing so you don’t get unexpected misalignments:

.sizes-grid {
display: grid;
grid-gap: 1rem; /* set your desired gap /
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); / auto-fit as many 80px-min items as will fit, then expand to fill. Replace 80px with your desired width */

/* add this to your btn so you don’t have unexpected misalignments due to some padding or border */
.size-btn {
box-sizing: border-box;
}

3

Hello,

Thanks for your help earlier. I tried exactly what you suggested switching to Grid, using repeat(auto-fit, minmax(…)), and setting box-sizing: border-box but unfortunately the last column is still slightly misaligned. It ends up a little wider than the rest of the boxes on certain screen widths.

I’ve noticed that the alignment issue happens when there are fewer than 6 items in a row. When there are exactly 6 items, everything aligns perfectly, but when there are less than 6 items, the last column becomes misaligned.

Here’s the exact code I used, based on your recommendation:

carbon (4).png
carbon (4).png1328×1750 310 KB

Screenshot 2025-04-27 at 16.22.08.png
Screenshot 2025-04-27 at 16.22.08.png1296×954 46.8 KB

Screenshot 2025-04-27 at 16.23.04.png
Screenshot 2025-04-27 at 16.23.04.png1274×981 45.9 KB

Let me know if there’s something I’m missing! I think the issue might be that the 1fr causes the last column to stretch when there’s extra space even though the items look like they’re the same width.

4

Hello,

Thanks for your insight I completely agree that this is a common issue with responsive grids, especially when using Flexbox or Grid layouts, and the items per row change across breakpoints.

I’ve encountered the same issue, and despite adjusting the grid, the last column becomes misaligned when there are fewer than 6 items per row. I’ve made sure to ensure equal widths, avoid leftover space, and keep proper wrapping/alignment, but the issue persists.

Since you mentioned resolving this with the guidance of someone else, I was wondering if you could share how you managed to fix it? Any advice would be much appreciated!

Thanks again!