Masonry: Bug fix, "basic" layout not left aligning

[CalvinChhour]

Pull Request Template

Summary

Issue

When layout is set to basic, the docs state that the grid will be "Left-aligned, fixed-column-width masonry layout." This wasn't the case, due to gutterWidth pushing the items away from the left side. When gutterWidth is set to 0, it is appropriately left aligned, but then you have no gutter spacing between pins.

Additionally, center alignment was miscalculated due to the inclusion of an extra gutter (e.g. when you have 4 columns, you should only calculate 3 gutterWidths for the contentWidth)

What changed?

I've introduced a new optional prop justify which controls the horizontal alignment of items within the Masonry grid. This change affects both Masonry and MasonryV2

Center Alignment

Center alignment was slightly off, due to an extra gutter being calculated

Before	After

Start Alignment

We were center aligning before, we are now properly start aligning when justify='start' is set

Before	After

End Alignment

End alignment didn't exist previously

Before	After
Did not exist

Why?

This change is needed for situations where we need the Masonry to be left aligned to match other Pin Grid formats (e.g. aligning Modules with PinReps with the Masonry).

This image highlights an issue we have, where the left aligned title looks disjointed from the Masonry grid.

Links

• Jira
• Figma

Checklist

• [x] Added unit and Flow Tests
• [ ] Added documentation + accessibility tests
• [x] Verified accessibility: keyboard & screen reader interaction
• [ ] Checked dark mode, responsiveness, and right-to-left support
• [x] Checked stakeholder feedback (e.g. Gestalt designers, relevant feature teams)

[netlify[bot]]

✅ Deploy Preview for gestalt ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	4da793e3ad8fce15c4f85e4f8bd5fc0b36cdced7
🔍 Latest deploy log	https://app.netlify.com/sites/gestalt/deploys/66464e6f0c18a70009aafd02
😎 Deploy Preview	https://deploy-preview-3558--gestalt.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[jackhsu978]

@CalvinChhour sorry for the short notice, but I am planning on landing https://github.com/pinterest/gestalt/pull/3567 this week for TypeScript migration, and this PR will conflict with that. Can you check with @liuyenwei and determine if you'll be able to merge this PR tomorrow (5/16)? If so, I will wait and apply the same changes to the TS branch.