I am trying to achieve a grid of perfectly aligned dynamic items within a collection wrapper that displays in 2 columns with 1 pt rules around them, and the number of items will simply wrap into rows. So if there are 6 items, there will be 2 columns of 3 rows. I have set a rule at the bottom and right side of the item so when stacked, it forms a complete rule around them. I also added a rule on the top and left side of the collection wrapper to complete the ‘box’ on the top/left edges.
The problem is the first (top) row. There’s a single pixel either to the right or left (depending on how I style the collection item), but then the subsequent rows are aligned properly.
See the ‘Upcoming Events’ section on this page:
You can see that the second row of items is shifted one pixel to the left and the rules don’t align properly. No matter what I do there’s a 1 pixel discrepancy between the top row and subsequent rows. How do I get all the collection items to align properly?