Stacks
Stacks copied to clipboard
StackExchange
Explore switching to native gap for flex grid
Native gap support is coming to flex layouts in Safari. It's already shipped in Chrome and Firefox. This pull request explores removing our margin workaround and closes #328. We'll need a strategy for Edge Legacy 18. Perhaps it's time to do what needs to be done there.
Size with native gap: original size: 255140 / gzipped size: 36515
Size with margin workaround: original size: 255631 / gzipped size: 36571
This approach could safely merge in Q2 2022, given adoption rates of macOS and iOS. A majority of our users would be on the latest 2 versions of Safari by then.
Deploy Preview for stacks ready!
| Name | Link |
|---|---|
| Latest commit | c904545a72670cb5722098f36efbdb7d08efabf4 |
| Latest deploy log | https://app.netlify.com/sites/stacks/deploys/628bc929081b6800091928d4 |
| Deploy Preview | https://deploy-preview-591--stacks.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 settings.
![netlify[bot] avatar](https://avatars.githubusercontent.com/in/13473?v=4 "Published by a pub.dev verified publisher"){kind=small}
The biggest difference I see here is fw-wrap wraps way more aggressively when using native gaps vs. our negative margin hacks. When using margins, you were guaranteed that the columns would fill the available space. Gap, not so much.
Margin
Gap
I love me some grid, but resolving the conflicts in this branch would be more work than they're worth though. We'll eventually pursue this in another branch.
Closing!
